Opacidad de CSS solo para el color de fondo, no el texto en él?

¿Puedo asignar la propiedad de opacity a la propiedad de background de un div solamente y no al texto en él?

He intentado:

 background: #CCC; opacity: 0.6; 

pero esto no cambia la opacidad.

Parece que desea utilizar un fondo transparente, en cuyo caso podría intentar usar la función rgba() :

rgba(R, G, B, A)

R (rojo), G (verde) y B (azul) pueden ser o s, donde el número 255 corresponde al 100%. A (alfa) puede ser un entre 0 y 1, o un , donde el número 1 corresponde al 100% (opacidad total).

Ejemplo de RGBa

 rgba(51, 170, 51, .1) /* 10% opaque green */ rgba(51, 170, 51, .4) /* 40% opaque green */ rgba(51, 170, 51, .7) /* 70% opaque green */ rgba(51, 170, 51, 1) /* full opaque green */ 

Un pequeño ejemplo que muestra cómo se puede usar rgba .

A partir de 2018, prácticamente todos los navegadores admiten la syntax de 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%; } 
 
Test

Esto funcionará con todos los navegadores

 div { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; } 

Si no quiere que la transparencia afecte a todo el contenedor y sus hijos, consulte esta solución. Debe tener un niño absolutamente posicionado con un padre relativamente posicionado para lograr esto. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Ver demostración en funcionamiento en http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Solo para usuarios LESS :

Si no te gusta establecer tus colores usando RGBA, sino más bien usando HEX, hay 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 una función LESS incorporada :

 .myClass { background-color: fade(#FFFFFF, 50%); } 

Vea Cómo convertir el color HEX a rgba con Less compiler?

Mi truco es crear un .png transparente con el color y usar background:url() .

Yo tuve el mismo problema. Quiero un color de fondo 100% transparente, solo use este código, funcionó muy bien para mí:

 rgba(54, 25, 25, .00004); 

Puede ver ejemplos en el lado izquierdo de esta página web (el área de formulario de contacto)

Una buena forma de hacerlo sería usar css3 de hecho.

Crea un ancho div en una clase, por ejemplo, un supersizer en la parte superior de la página:

luego configure las siguientes propiedades css:

  .supersizer { background: url("http://sofes.miximages.com/opacity/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed; width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0.5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; } 
 

Para cualquiera que encuentre este hilo, aquí hay un script llamado thatsNotYoChild.js que acabo de escribir que resuelve este problema automáticamente:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Básicamente, separa a los niños del elemento primario, pero mantiene el elemento en la misma ubicación física en la página.

La solución más fácil es crear 3 divs . Uno que contendrá los otros 2, uno con fondo transparente y el otro con contenido. Haga que la posición del primer div sea relativa y configure la que tiene fondo transparente con el z-index negativo, luego ajuste la posición del contenido para que encaje sobre el fondo transparente. De esta forma no tendrás problemas con el posicionamiento absoluto.

utilizar

 background:url("location of image");//use an image with opacity 

Este método funcionará en todos los navegadores

No puedes. Tienes que tener un div separado que sea solo ese fondo, para que solo puedas aplicar la opacidad a eso.

Intenté hacer esto recientemente, y como ya estaba usando jQuery, encontré que la siguiente es la menor molestia:

  1. Crea los dos divs diferentes. Serán hermanos, no estarán contenidos el uno en el otro ni nada por el estilo.
  2. Proporcione al text div un color de fondo sólido, porque ese será el valor predeterminado sin JS.
  3. Usa jQuery para obtener la altura del div del text y aplícalo al div de background .

Estoy seguro de que hay algún tipo de CSS ninja para hacer todo esto con solo carrozas o algo así, pero no tuve la paciencia para resolverlo.