Opazität des Bildes kann nicht innerhalb von div gesteuert werden

Ich möchte, dass das Bild innerhalb des Div undurchsichtig und das Div transparent ist. Ich habe versucht, die Deckkraft für Bild und Div einzustellen, aber es funktioniert nicht.Opazität des Bildes kann nicht innerhalb von div gesteuert werden

jsFiddle-Link: http://jsfiddle.net/2BNEF/10/

Ich mag das Bild undurchsichtig und Text sein, transparent sein, sichtbar in.

<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; 
}

Quelle

2012-09-04 exception

ähnlich: [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 –

Wenn Sie opacity auf ein Element gesetzt ist, dann wird es von allen Nachkommen (Kinder, alle Kinder Kinder ...) erbte dieses Elements und gibt es nichts, was Sie, dass verhindern tun können.

In diesem Fall könnten Sie einfach einen RGBa-Hintergrund (rgba(0,0,0,.5) anstelle von schwarz -) für die div verwenden. RGBa hat ausgezeichnete Unterstützung - die einzigen Browser, die es nicht unterstützen, sind IE8 und älter und für diese können Sie einen filter Farbverlauf verwenden.

Quelle

2012-09-04 18:42:48 Ana

durch @Ana sagte Da die Opazität wird von allen Kindern der Eltern geerbt
können Sie ein combinaison von RGBa und die Opazität für alle Kinder der Div-Set mit

#targetframe > * { 
    opacity: 0.5; 
}

angeben als Ihre Bild muss

.myimage { 
    opacity: 1; 
}

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

Quelle

2012-09-04 18:46:14

Oder nehmen Sie einfach die Behälter eine absolute Position undurchsichtig ed div mit Höhe und Breite, die Sie wollen und und positionieren Sie das Bild auch und weisen Sie dem Bild einen höheren Z-Index und dann zuweisen Sie die Opazität, die Sie wollen.

Quelle

2012-09-04 18:53:49 AnAspiringCanadian

Ich versuchte High-Z-Index mit Deckkraft, aber es hat nicht funktioniert . – exception

http://jsfiddle.net/AbxM8/: Ist das was du willst? – AnAspiringCanadian

Opazität des Bildes kann nicht innerhalb von div gesteuert werden

Antwort

Verwandte Themen