無法控制div內的圖像的不透明度

我希望div內的圖像不透明，div必須透明。我試圖設置圖像和div的不透明度，但它不工作。無法控制div內的圖像的不透明度

的jsfiddle鏈接：http://jsfiddle.net/2BNEF/10/

我想要的圖像是不透明和文字在透明可見。

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

來源

2012-09-04 exception

類似：[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 –

如果一個元素上設置opacity，則該元素的所有後代（孩子，所有的孩子的孩子...）和繼承沒有什麼可以做，以防止。

在這種情況下，您可以對div使用RGBa背景（rgba(0,0,0,.5)而不是黑色 - DEMO）。 RGBa具有出色的支持 - 唯一不支持它的瀏覽器是IE8及更高版本，對於那些可以使用filter漸變的瀏覽器。

來源

2012-09-04 18:42:48 Ana

正如@Ana說，不透明度與父母的所有孩子
可以的RGBA的combinaison和不透明度設置爲事業部的所有兒童

#targetframe > * { 
    opacity: 0.5; 
}

比指定繼承了你圖像必須是不透明

.myimage { 
    opacity: 1; 
}

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

來源

2012-09-04 18:46:14

或者只取容器中的絕對位置ed div與你想要的高度和寬度，並定位圖像，並指定圖像更高的z-index，然後分配你想要的不透明度。

來源

2012-09-04 18:53:49 AnAspiringCanadian

我試着用不透明的高Z指數，但它沒有工作。 – exception

http://jsfiddle.net/AbxM8/：這是你想要的嗎？ – AnAspiringCanadian

無法控制div內的圖像的不透明度

回答

相關問題