¿Cómo establecer la opacidad en el div padre y no afectar en el div hijo? [duplicar]

Esta pregunta ya tiene una respuesta aquí:

Hey estoy buscando en Google, pero no puedo multar cualquier respuesta perfecta

Quiero opacidad en DIV padre pero no DIV Hijo

Ejemplo

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

Css

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

Nota: -- quiero a background-image{[21] {} en[2]} no Color

Author: Community, 2012-06-04
Source

7 answers

Puede ser que sea bueno si define su imagen de fondo en la pseudo clase :after. 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;
}

Marque este violín

 40
Author: sandeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-27 07:42:57

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

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>

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

 72
Author: PaulSatcom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-25 16:23:00

Usted puede hacerlo con pseudo-elementos: (demo on dabblet.com ) introduzca la descripción de la imagen aquí

Su marcado: 

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

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;
}
 15
Author: Vladimir Starkov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-04 09:55:58

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

 6
Author: Rik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-05 18:55:16

No puedes. Css hoy simplemente no permite eso.

El modelo de renderizado lógico es este:

Si el objeto es un elemento contenedor, entonces el efecto es como si el contenido del elemento contenedor se mezclara con 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, generalmente usando posiciones fijas o computadas para lo que hoy se define como un hijo: puede parecer lógico y visual para el usuario como un hijo, pero el elemento no necesita ser realmente un hijo en su código.

Una solución usando css: fiddle 

.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: fiddle

 4
Author: Denys Séguret,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-27 07:05:13

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

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

 1
Author: Prakash Thangavelu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-06 09:33:49

No puede hacer eso, a menos que saque al niño del padre y lo coloque a través de posicionamiento.

La única manera que conozco y que realmente funciona, es usar una imagen translúcida (.png con transparencia) para el fondo del padre. La única desautorización es que no se puede controlar la opacidad a través de CSS, aparte de que funciona!

 0
Author: jackJoe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-04 09:43:30