É possível, utilizando apenas CSS, tornar o "fundo" de um elemento semi-transparente, mas ter o conteúdo (texto & imagens) do elemento opaco?
I'gostaria de realizar isto sem ter o texto e o fundo como dois elementos separados.
Ao tentar:
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
Parece que os elementos da criança estão sujeitos à opacidade de seus pais, então 'opacidade:1' é relativa à 'opacidade:0.6' dos pais.
O método mais fácil seria usar um fundo semi-transparente **PNG imagem***.
Você pode usar o JavaScript para fazê-lo funcionar em Internet Explorer 6 se você precisar.
Eu uso o método descrito em PNGs transparentes no Internet Explorer 6.
Fora isso, você poderia fingir usando dois elementos irmãos - fazer um semitransparente, depois solutamente posicionar o outro sobre o topo.
O problema é que o texto na verdade tem total opacidade no seu exemplo. Ele tem opacidade total dentro da tag p
, mas a tag p
é apenas semi-transparente.
Você poderia adicionar uma imagem de fundo PNG semi-transparente em vez de realizá-la em CSS, ou separar texto e mergulhar em dois elementos e mover o texto sobre a caixa (por exemplo, margem negativa).
Caso contrário, não será possível.
Como Chris mencionou: se você usa um arquivo PNG com transparência, você tem que usar um workaround JavaScript para que ele funcione no irritante Internet Explorer...
Opacidade de fundo, mas não o texto tem algumas idéias. Ou usar uma imagem semi-transparente, ou sobrepor um elemento adicional.