Hola Estoy buscando en google pero no puedo multar cualquier respuesta perfecta¿Cómo establecer la opacidad en div principal y no afectar en div hijo?
Quiero Opacidad en DIV padres pero no DIV Niño
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 Imagen de fondo en Parent Div no el color
Puede ser que sea bueno si define su background-image 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 esta fiddle
mi respuesta es bastante similar a la tuya, pero no puedo imaginar lo que está mal con la mía –
@sandeep gracias por la respuesta exacta estábamos totalmente confundidos en este error ...... gracias amigo. ..... –
@VladimirStarkov cuando doy mi respuesta, no vi su respuesta :) – sandeep
No se puede. Css hoy simplemente no permite eso.
El modelo de representación lógica es ésta:
Si el objeto es un elemento contenedor, entonces el efecto es como si el contenido del elemento contenedor se mezclaron en el contexto actual utilizando una máscara donde el valor de cada píxel de la máscara es.
Referencia: css transparency
La solución es utilizar una composición de elementos diferentes, por lo general utilizando posiciones fijas o computados para lo que hoy se define como un niño: puede aparecer de manera lógica y visualmente para el usuario como un niño pero el elemento no necesita ser realmente un niño en tu 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
Gracias pero esto es solo color de fondo relacionado no imágenes de fondo ............. –
Pasa lo mismo con las imágenes. –
puede darme un ejemplo en jsfiddle.net –
No se puede hacer eso, a menos que tome al niño de los padres y colocarlo a través de posicionamiento.
La única forma que conozco y realmente funciona es usando una imagen translúcida (.png con transparencia) para el fondo del padre. La única desventaja es que no puedes controlar la opacidad a través de CSS, ¡excepto que funciona!
¿por qué el negativo? – jackJoe
Usted puede hacerlo con los pseudo-elementos: (demo on dabblet.com) 
su margen de beneficio:
<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;
}
hey @Vlamimir starkov no uso la posición ............... –
@RohitAzad ¿por qué es tan importante? –
+1 por su respuesta, usted también estuvo cerca de mi requerimiento, en realidad no definió la altura del ancho en su matriz, por eso estaba un poco confundido en sus torres, gracias ....... –
Sé que esto es viejo, pero en caso de que ayuden a otra persona.
<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>
Dónde rgba es: rojo, verde, azul y a es la transparencia.
... aa y no afecta a otros colores de fondo dentro de los elementos secundarios del niño (solo una nota rápida) – CularBytes
Agregar un estilo en línea codificado incorrecto es incorrecto. No comparta esto. – Ofear
Tuve el mismo problema y lo solucioné estableciendo la imagen png transparente como fondo para la etiqueta padre.
This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background!
Según lo mencionado por Tom, background-color: rgba(229,229,229, 0.85) puede hacer el truco. Colóquelo en el estilo del elemento principal y el niño no se verá afectado.
hey @DavidThomas ¿Cómo se puede decir que esta pregunta es duplicada si tiene alguna respuesta relacionada con esta pregunta sin utilizar la posición y se usa para las imágenes de fondo en div principal en css puro ............ . –
Pre-edita que parecía ser; Leí la pregunta en el móvil y luego, para encontrar duplicados, cambié al escritorio. No volví a leer tu pregunta entre horas. Mi voto cercano se desvanecerá, así que no te preocupes por eso. –