Opacidad del color de fondo, pero no del texto [duplicado]
¿Cómo puedo hacer que el fondo de varios navegadores (incluido Internet Explorer 6) sea transparente divmientras el texto permanece opaco?
Necesito hacerlo sin usar ninguna biblioteca como jQuery, etc. (Pero si conoces una biblioteca que lo haga, me encantaría saberlo para poder ver su código).
¡Usa rgba!
.alpha60 {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Además de esto, debe declarar
background: transparentpara los navegadores web IE, preferiblemente a través de comentarios condicionales o similares.
a través de http://robertnyman.com/2010/01/11/css-background-transparency- without -affecting-child-elements-through-rgba-and-filters/
Utilizo un PNG alfa transparente para eso:
div.semi-transparent {
background: url('semi-transparent.png');
}
Sin embargo , para IE6, necesitaría usar una solución PNG ( 1 , 2 ).
Para relajar sus requisitos para trabajar en IE6 y navegadores heredados, puede usar ::before y mostrar: inline-block
div
{
display: inline-block;
position: relative;
}
div::before
{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background:red;
opacity: .2;
}
Demostración en http://jsfiddle.net/KVyFH/172/
Funcionará en cualquier navegador moderno.
