¿Es posible, utilizando sólo CSS, hacer que el fondo
de un elemento sea semitransparente pero que el contenido (texto & imágenes) del elemento sea opaco?
Me gustaría lograr esto sin tener el texto y el fondo como dos elementos separados.
Al intentarlo:
comenzar el snippet: js hide: false -->
<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;
}
...fin del fragmento..;
Parece que los elementos hijos están sujetos a la opacidad de sus padres, por lo que opacity:1
es relativa a la opacity:0.6
del padre.
El método más sencillo sería utilizar una imagen PNG de fondo semitransparente.
Puedes usar JavaScript para que funcione en Internet Explorer 6 si lo necesitas.
Yo utilizo el método descrito en PNGs transparentes en Internet Explorer 6.
Aparte de eso, podría fingirlo usando dos elementos hermanos uno al lado del otro - hacer uno semitransparente, y luego colocar el otro absolutamente encima.
El problema es que el texto realmente tiene opacidad total en su ejemplo. Tiene opacidad total dentro de la etiqueta p
, pero la etiqueta p
es sólo semitransparente.
Podrías añadir una imagen de fondo PNG semitransparente en lugar de realizarla en CSS, o separar el texto y el div en dos elementos y mover el texto sobre la caja (por ejemplo, margen negativo).
De lo contrario, no será posible.
Tal como mencionó Chris: si usas un archivo PNG con transparencia, tienes que usar una solución de JavaScript para que funcione en el molesto Internet Explorer...
Opacidad del fondo, pero no del texto tiene algunas ideas. O bien utilizar una imagen semitransparente, o superponer un elemento adicional.