Usuário com melhor resposta
Posicionamento de Texto sobre imagem

Pergunta
-
Olá pessoal, estou desenvolvendo um aplicação Web como projeto de Iniciação científica. Tenho na base de dados MySQL informações referentes NFPA de produtos químicos e estes valores correspondem a grau de:
->Perigo de Saúde (Azul)
->Inflamabilidade (Vermelho)
->Reatividade (Amarelo)
->Riscos específicos (Branco)Estes valores vão de 0 à 4 e como já disse estão na base de dados MySQL. No formulário web tenho uma imagem que representa o Diagrama de Homell onde estes valores devem ficar. Cada valor no correspondente local da cor. Poderia salvar uma imagem para cada produto químico mais isso ficaria gastaria muito espaço em virtude dos tantos produtos químicos que existem. Enfim, eu queria que o valores ficassem posicionados exatamente com mostra a imagem abaixo e de maneira fixa.
Respostas
-
Fiz isso com CSS é claro...
<style type="text/css">
.container {
;
width:250px;
height:200px;
}
.azul {
;
top: 20%;
left: 48%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.vermelho {
;
top: 55%;
left: 48.5%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.amarelo {
;
top: 38%;
left: 30%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.branco {
;
top: 38%;
left: 65%;
transform: translate(-50%, -50%);
font-size: 18px;
}
</style>- Marcado como Resposta Icosaedro quinta-feira, 30 de junho de 2016 21:53
Todas as Respostas
-
-
-
Fiz isso com CSS é claro...
<style type="text/css">
.container {
;
width:250px;
height:200px;
}
.azul {
;
top: 20%;
left: 48%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.vermelho {
;
top: 55%;
left: 48.5%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.amarelo {
;
top: 38%;
left: 30%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.branco {
;
top: 38%;
left: 65%;
transform: translate(-50%, -50%);
font-size: 18px;
}
</style>- Marcado como Resposta Icosaedro quinta-feira, 30 de junho de 2016 21:53