css - transparencia - Opacidad del color de fondo, pero no del texto
texto opaco sobre fondo semitransparente con css (5)
Gracias @ davy-landmann por https://stackoverflow.com/a/638064/417153 . ¡Eso es lo que estaba buscando! Mismo efecto con el código MENOS:
@searchResultMinHeight = 200px;
.searchResult {
min-height: @searchResultMinHeight;
position: relative;
.innerTrans {
background: white;
.opacity(0.5);
min-height: @searchResultMinHeight;
}
.innerBody {
padding: 0.5em;
position: absolute;
top: 0;
}
}
Esta pregunta ya tiene una respuesta aquí:
¿Cómo hago que la transparencia entre navegadores (incluido Internet Explorer 6) para el fondo de un div mientras el texto permanezca 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).
He creado ese efecto en mi blog Código Landman .
Lo que hice fue
#Header {
position: relative;
}
#Header H1 {
font-size: 3em;
color: #00FF00;
margin:0;
padding:0;
}
#Header H2 {
font-size: 1.5em;
color: #FFFF00;
margin:0;
padding:0;
}
#Header .Background {
background: #557700;
filter: alpha(opacity=30);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.3;
zoom: 1;
}
#Header .Background * {
visibility: hidden; // hide the faded text
}
#Header .Foreground {
position: absolute; // position on top of the background div
left: 0;
top: 0;
}
<div id="Header">
<div class="Background">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div class="Foreground">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</div>
Lo importante es que cada relleno / margen y contenido deben ser los mismos tanto en .Background como en .Foreground.
Relajando su necesidad de trabajar en IE6 y en los navegadores antiguos, puede usar :: antes y mostrar: bloque en línea
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.
Utilice 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 el
background: transparentpara los navegadores web de IE, preferiblemente a través de comentarios condicionales o similares.