¿Opacidad CSS solo para el color de fondo, no para el texto? [duplicar]
¿Puedo asignar la opacitypropiedad a la backgroundpropiedad de a divúnicamente y no al texto que contiene?
He intentado:
background: #CCC;
opacity: 0.6;
pero esto no cambia la opacidad.
Parece que quieres usar un fondo transparente, en cuyo caso puedes intentar usar la rgba()función:
rgba(R, G, B, A)R (rojo), G (verde) y B (azul) pueden ser
<integer>s o<percentage>s, donde el número 255 corresponde al 100%. A (alfa) puede estar<number>entre 0 y 1, o a<percentage>, donde el número 1 corresponde al 100% (opacidad total).Ejemplo de RGBa
background: rgba(51, 170, 51, .1) /* 10% opaque green */ background: rgba(51, 170, 51, .4) /* 40% opaque green */ background: rgba(51, 170, 51, .7) /* 70% opaque green */ background: rgba(51, 170, 51, 1) /* full opaque green */
Un pequeño ejemplo que muestra cómo rgbase puede utilizar.
A partir de 2018, prácticamente todos los navegadores admiten la rgbasintaxis .
Feb 27 '2011 18:02
La forma más sencilla 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>
Solo para menos usuarios:
Si no le gusta configurar sus colores usando RGBA, sino usando HEX, existen soluciones.
Podrías usar un mixin como:
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
Y úsalo como:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
En realidad, esto es lo que también proporciona la función Less incorporada :
.myClass {
background-color: fade(#FFFFFF, 50%);
}
Consulte ¿Cómo convierto un color hexadecimal a rgba con el compilador Less?
Mi truco consiste en crear un .png transparente con el color y usar background:url().
