¿Cómo reduzco la opacidad del fondo de un elemento usando CSS?
¿Es posible, usando solo CSS, hacer que backgroundun elemento sea semitransparente pero que el contenido (texto e imágenes) del elemento sea opaco?
Me gustaría lograr esto sin tener el texto y el fondo como dos elementos separados.
Al intentar:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>Parece que los elementos secundarios están sujetos a la opacidad de sus padres, por lo que opacity:1es relativo a la opacity:0.6de los padres.
Utilice una imagen PNG o SVG semitransparente o utilice CSS:
background-color: rgba(255, 0, 0, 0.5);
Aquí hay un artículo de css3.info, Opacidad, RGBA y compromiso (3 de junio de 2007).
Tenga en cuenta que el texto aún necesita suficiente contraste con el fondo, una vez que el fondo subyacente brilla.
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
En Firefox 3 y Safari 3, puedes usar RGBA como mencionó Georg Schölly .
Un truco poco conocido es que también puedes usarlo en Internet Explorer usando el filtro de degradado.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
El primer número hexadecimal define el valor alfa del color.
Solución completa para todos los navegadores:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: 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)";
}
Esto es desde la transparencia del fondo CSS sin afectar los elementos secundarios, pasando por RGBa y filtros .
Capturas de pantalla que prueban los resultados:
Esto es cuando se usa el siguiente código:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
Esta es la mejor solución que se me ocurrió, SIN usar CSS 3. Y, hasta donde puedo ver, funciona muy bien en Firefox, Chrome e Internet Explorer.
Coloque un contenedor divy dos niños dival mismo nivel, uno para el contenido y otro para el fondo. Y usando CSS, ajuste automáticamente el tamaño del fondo para que se ajuste al contenido y coloque el fondo en la parte posterior usando el índice z.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>