¿Puedo asignar la propiedad opacidad
a la propiedad fondo
de un div
solamente y no al texto que hay en él?
Lo he intentado:
background: #CCC;
opacity: 0.6;
pero esto no cambia la opacidad.
Parece que quieres usar un fondo transparente, en cuyo caso podrías intentar usar la función rgba()
:
rgba(R, G, B, A)
R (rojo), G (verde) y B (azul) pueden ser
<integros>
o<porcentaje>
, donde el número 255 corresponde al 100%. A (alfa) puede ser un<número>
entre 0 y 1, o un<porcentaje>
, donde el número 1 corresponde al 100% (opacidad total).
Ejemplo de RGBa
rgba(51, 170, 51, .1) / 10% de verde opaco / rgba(51, 170, 51, .4) / 40% verde opaco / rgba(51, 170, 51, .7) / 70% verde opaco / rgba(51, 170, 51, 1) / verde totalmente opaco /
Un pequeño [ejemplo][2] que muestra cómo se puede utilizar rgba
.
A partir de 2018, prácticamente **todos los navegadores soportan la sintaxis rgba
.
La forma más fácil de hacerlo es con 2 divs, 1 con el fondo y 1 con el texto:
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
No se puede. Usted tiene que tener un div separado que es sólo que el fondo, de modo que sólo se puede aplicar la opacidad a eso.
Traté de hacer esto recientemente, y como ya estaba usando jQuery, encontré lo siguiente para ser la menor molestia:
texto
un color de fondo sólido, porque ese será el predeterminado sin JavaScript.text
y aplícala al div background
.Estoy seguro de que hay algún tipo de manera ninja de CSS para hacer todo esto con sólo flotadores o algo así, pero no tuve la paciencia para averiguarlo.