Posicionamento de Texto sobre imagem

Question

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. 

Answer 1

Já encontrei a solução!

Answer 2

Olá, 

poste a solução e feche a thread , mais pessoas podem precisar :)

---

---

Diego Almeida Barreto
System Analyst / Software Developer

Answer 3

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>