2013-02-10 68 views
0

如果這是重複的,我很抱歉。我查看了相關的帖子,找不到與我正在處理的內容相似的內容。影響家長的子女不透明

我有一個圖像,當盤旋時,不透明度降低。我在包含圖像的DIV上方的DIV中有文本,它受圖像的不透明度設置影響。文本假設保持穩定,而圖像變得透明。不幸的是,這兩個元素在懸停時變得透明。我認爲,由於文本被認爲是父元素,因此不應該受圖像不透明度設置的影響。

HTML:

<div class="album large"> 
    <div class="writing"> 
     <h1>blah</h1> 
    </div> 
    <div class="opac"> 
     <img src="background/runaways.jpg"> 
    </div> 
</div> 

CSS:

.album img 
    { 
    display:block; 
    margin: auto; 
    } 

.album.large 
    { 
    background-image: url('background/bigblack.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-bottom: 50px; 
    } 


.writing 
    { 
    position: absolute; 
    color:red; 
    left: 50%; 
    margin-left: -270px; 
    } 

.opac img:hover 
    { 
    opacity: .4; 
    filter:alpha(opacity=40); 
    } 
+0

你能爲我們設置一個[JSFiddle](http://www.jsfiddle.net)嗎? – 2013-02-10 02:38:32

+1

[不適合我](http://jsfiddle.net/XBmcr/)。它按預期工作。 – 2013-02-10 02:38:51

+0

您的代碼完美無瑕。你在測試什麼瀏覽器? – 2013-02-10 02:59:38

回答

0

解決父DIV

的透明度問題,使用僞元素,我們可以擺脫這個,檢查下面給出的link更多細節。