No se puede controlar la opacidad de la imagen dentro de div

Quiero que la imagen dentro del div sea opaca y el div sea transparente. Intenté establecer la opacidad para la imagen y div, pero no está funcionando.No se puede controlar la opacidad de la imagen dentro de div

jsFiddle Enlace: http://jsfiddle.net/2BNEF/10/

Quiero que la imagen sea opaco y texto sea visible en transparente.

<div id="targetframe"> 
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes 
    <div id="target"> 
     out. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their defaul 
     <img class="myimage" src="http://www4.picturepush.com/photo/a/1365552/480/trucks-photgraphy/asdf-%2858%29.jpg?v0"/> 
    </div> 
</div> 


#targetframe { 
    background: none repeat scroll 0 0 black; 
    border: 2px inset grey; 
    font-family: Verdana,sans-serif; 
    left: 0; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    top: 0; 
    opacity: 0.5; 
} 
#target { 
    background: none repeat scroll 0 0 transparent; 
    height: 100%; 
    left: 0; 
    position: relative; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
} 
.myimage { 
    opacity: 1; 
}

Fuente

2012-09-04 exception

similar: [http://stackoverflow.com/questions/5662178/opacity-of-divs-background-without-affecting-contained-element-in-ie-8][1] [ 1]: http://stackoverflow.com/questions/5662178/opacity-of-divs-background-without-affecting-contained-element-in-ie-8 –

Si establece opacity sobre un elemento, entonces es heredado por todos los descendientes (hijos, todos los hijos de los hijos ...) de ese elemento y no hay nada que puede hacer para prevenir que.

En este caso, podría utilizar simplemente un fondo RGBa (rgba(0,0,0,.5) en lugar de negro - DEMO) para el div. RGBa tiene una excelente compatibilidad: los únicos navegadores que no lo admiten son IE8 y anteriores y para aquellos que pueden usar un gradiente filter.

Fuente

2012-09-04 18:42:48 Ana

Según lo dicho por @Ana la opacidad es heredado por todos los hijos de los padres
Puede un Combinaison de RGBA y establecer la opacidad a todos los niños de la Div con

#targetframe > * { 
    opacity: 0.5; 
}

de especificar que su imagen debe ser opaco

.myimage { 
    opacity: 1; 
}

http://jsfiddle.net/2BNEF/15/

Fuente

2012-09-04 18:46:14

o simplemente tomar el contenedor de una posición absoluta ed div con la altura y el ancho que desee y coloque también la imagen y asigne a la imagen un índice z más alto y luego asigne la opacidad que desee.

Fuente

2012-09-04 18:53:49 AnAspiringCanadian

Probé un alto índice z con opacidad pero no funcionó . – exception

http://jsfiddle.net/AbxM8/: ¿Esto es lo que quieres? – AnAspiringCanadian

No se puede controlar la opacidad de la imagen dentro de div

Respuesta

Cuestiones relacionadas