¿Cómo establecer la opacidad en div principal y no afectar en div hijo?

Hola, estoy buscando en Google, pero no puedo encontrar ninguna respuesta perfecta

Quiero Opacidad en DIV parental pero no DIV infantil

Ejemplo

HTML

Hello I am child

Css

 .parent{ background:url('../images/madu.jpg') no-repeat 0 0; } .child{ Color:black; } 

Nota: – Quiero imagen de fondo en Parent Div not Color

Puede ser que sea bueno si defines tu imagen de fondo en :after pseudo clase. Escribe así:

 .parent{ width:300px; height:300px; position:relative; border:1px solid red; } .parent:after{ content:''; background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image'); width:300px; height:300px; position:absolute; top:0; left:0; opacity:0.5; } .child{ background:yellow; position:relative; z-index:1; } 

Mira este violín

Sé que esto es viejo, pero por si acaso ayudará a alguien más.

 
child

Donde rgba es: rojo, verde, azul y a es transparencia.

Puedes hacerlo con pseudo-elementos: ( demo en dabblet.com ) enter image description here

su marcado:

 
Hello I am child

css:

 .parent{ position: relative; } .parent:before { z-index: -1; content: ''; position: absolute; opacity: 0.2; width: 400px; height: 200px; background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; } .child{ Color:black; } 

Como mencionó Tom, background-color: rgba(229,229,229, 0.85) puede hacer el truco. Coloque eso en el estilo del elemento principal y el niño no se verá afectado.

No puedes. Css hoy simplemente no permite eso.

El modelo de representación lógica es este:

Si el objeto es un elemento contenedor, entonces el efecto es como si el contenido del elemento contenedor se mezcló contra el fondo actual usando una máscara donde está el valor de cada píxel de la máscara.

Referencia: transparencia css

La solución es usar una composición de elemento diferente, usualmente usando posiciones fijas o calculadas para lo que hoy se define como un niño: puede aparecer lógica y visual para el usuario como un niño, pero el elemento no necesita ser realmente un niño en tu codigo.

Una solución que usa CSS: violín

 .parent { width:500px; height:200px; background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg'); opacity: 0.2; } .child { position: fixed; top:0; } 

Otra solución con javascript: violín

Tuve el mismo problema y lo solucioné estableciendo la imagen png transparente como fondo para la etiqueta padre.

¡Esta es la imagen PNG de 1px x 1px que he creado con 60% de opacidad de fondo negro !

No puedes hacer eso, a menos que saques al niño del padre y lo coloques mediante posicionamiento.

La única forma en que lo sé y realmente funciona es usar una imagen translúcida (.png con transparencia) para el fondo de los padres. La única desventaja es que no puedes controlar la opacidad a través de CSS, ¡excepto que funciona!