用各種瀏覽器打開(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)。但這是多麻煩的事(不信試一下)。
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ì)被虛化。代碼如下:
新聞熱點(diǎn)
疑難解答
圖片精選