2012-09-04 14 views
5

Görüntüdeki divun opak olmasını ve saydamın saydam olmasını istiyorum. Görüntü ve div için opaklığı ayarlamayı denedim, ancak çalışmıyor.Görüntü içindeki boşlukların opaklığı kontrol edilemiyor

jsFiddle Bağlantı: http://jsfiddle.net/2BNEF/10/

Ben görüntü opak olmasını istediğiniz ve metin şeffaf görünür olmaları için. Bir öğeyi opacity ayarlarsanız

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

içindeki [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 –

cevap

4

, o zaman o önlemek için yapabileceğiniz hiçbir şey yoktur bütün bu elemanın torunları (çocuklar, hepsi çocuklarımızın çocukları ...) ve tarafından miras alınır.

Bu durumda, div için RGBa arkaplanı (siyah yerine rgba(0,0,0,.5) - DEMO) kullanabilirsiniz. RGBa'nın mükemmel desteği vardır - bunu desteklemeyen tarayıcılar IE8 ve daha eskidir ve bunlar için filter gradyanını kullanabilirsiniz. @Ana tarafından dediği gibi

1

donukluk Bir RGBA ait combinaison ve belirtmek daha

#targetframe > * { 
    opacity: 0.5; 
} 

ile Div tüm çocuklara saydamlığını ayarlayabilirsiniz
ebeveynin çocuklar tarafından devralınan senin görüntü opak olmalıdır

.myimage { 
    opacity: 1; 
} 

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

1

Ya da sadece konteynerin mutlak pozisyon almak İstediğiniz yükseklik ve genişliğe sahip div ve görüntüyü konumlandırın ve görüntüyü daha yüksek bir z-endeksine atayın ve sonra istediğiniz opaklığı atayın.

+0

Yüksek z-endeksini opaklıkla denedim ama işe yaramadı . – exception

+1

http://jsfiddle.net/AbxM8/: İstediğin bu mu? – AnAspiringCanadian