在div中更改div的不透明度 - 這可能嗎？怎麼樣？

我從網頁設計師的佈局，其中包含（探頭）有：在div中更改div的不透明度 - 這可能嗎？怎麼樣？

<div id="subMenuRow"> 
<div id="subMenuRowHTML"> 
    <a href="/link">Link</a> 
</div> 
</div>

和CSS分別爲它：

#subMenuRow{ 
     width: 900px; 
     height: 40px; 
     background: #000000; 
     float: left; 
     clear: both; 
     filter:alpha(opacity=30); 
     -moz-opacity:0.3; 
     -khtml-opacity: 0.3; 
     opacity: 0.3; 
}

不透明度用於製造HTML菜單透明條。問題是，包括鏈接的每個文本都包含透明度，這是非常不必要的。如何避免subMenuRowHTML的不透明度？

來源

2010-01-05 bluszcz

最後，我把HTML div放在外面，並設置了絕對位置。感謝球員的建議。 – bluszcz 2010-01-05 13:11:36

首先，你不需要使用-moz-opacity和-khtml-opacity了。他們非常非常老。

今天沒有完全支持的解決方案。 CSS3 RGBA解決這一在現代瀏覽器，但如果你需要支持舊的瀏覽器，你將需要使用半透明PNG：

#subMenuRow { background: url(semi-trans.png); }

IE6將與此優雅降級：

* html #subMenuRow { background: url(full-opacity.gif); }

也有easy options爲png在IE6上的透明度。隨你便。

如果您的代碼中有許多opacity的實例，並且不想在各處使用* html搞亂您的代碼，則可以使用條件註釋。

來源

2010-01-05 12:16:36

謝謝，我會用png修復下一個項目。 – bluszcz 2010-01-05 13:12:16

-2

地址：

#subMenuRowHTML { 
filter:none; 
-moz-opacity:1; 
-khtml-opacity:1; 
opacity:1; 
}

來源

2010-01-05 11:18:30

這不起作用，所有的不透明度設置將相對於父母的不透明度（=永遠不會比父母透明度低）。 – 2010-01-05 11:19:44

啊，好點。 – 2010-01-05 11:20:17

使用半透明巴紐作爲背景圖像：

CSS：

background: transparent url(/url/image.png) top left repeat;

來源

2010-01-05 11:18:34

我認爲它帶來了另一個複雜性 - 就像IE6的透明度？我已經在下面畫了...... – bluszcz 2010-01-05 11:34:37

這是正確的！ IE6不處理透明PNG，因爲它應該。你可以通過使用一個javascript類來處理它; http://homepage.ntlworld.com/bobosola/ – 2010-01-05 12:08:32

在div中更改div的不透明度 - 這可能嗎？怎麼樣？

回答

相關問題