用各種瀏覽器打開(kāi)下面這個(gè) DEMO, IE9 有特殊顯示：http://demo.VeVb.com/js/2011/transparentbg/

一、使用 opacity + Alpha Filter


看起來(lái)手挺簡(jiǎn)單的吧？嗯。挺簡(jiǎn)單的… 希望你能很方便實(shí)現(xiàn)這個(gè)方案！其實(shí)見(jiàn)到這個(gè)的時(shí)候，我們的第一想法當(dāng)然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 濾鏡來(lái)實(shí)現(xiàn)。然后，我們得到這樣的效果：

.opacity{    background:#000;    opacity:0.3;    filter: alpha(opacity=30);}

無(wú)一例外，最外層，最內(nèi)層和文字，都被設(shè)置了 opacity（alpha 也是使用 opacity ） 。當(dāng)然，我們可以給各層設(shè)置 opacity 變回來(lái)。但這是多麻煩的事(不信試一下)。

二、最佳實(shí)踐：rgba色彩 + Gradient Filter


其實(shí)我們可以選用 background-color: rgba() 來(lái)實(shí)現(xiàn)，同樣可以實(shí)現(xiàn)透明效果，并且只應(yīng)用于當(dāng)前元素，不繼承。而 IE 的 filter 有很多濾鏡效果。其中的漸變?yōu)V鏡，只要變通一下，就可以實(shí)現(xiàn)我們想要的效果，并且這個(gè)濾鏡不會(huì)被下級(jí)元素繼承，這樣元素的內(nèi)容就不會(huì)被虛化。代碼如下：

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表