背景半透明最佳实践
透明作為一種效果增強(qiáng)的方案，被眾多視覺(jué)設(shè)計(jì)師喜歡。但因?yàn)?IE 的原因，透明，特別是半透明，已經(jīng)成為前端工程師最不愿意實(shí)現(xiàn)的東西?，F(xiàn)在有一個(gè)需求，需要對(duì)一個(gè)純色的層實(shí)現(xiàn)半透明效果。效果如下，邊框需要透明，透明度為 #000000 的 30%：
?
用各種瀏覽器打開(kāi)下面這個(gè) DEMO, IE9 有特殊顯示：
DEMO: 背景半透明最佳實(shí)踐 ?
一、使用 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ì)被虛化。代碼如下：
/** filter 漸變?yōu)V鏡詳細(xì)用法，[]* StartColorStr 和 EndColorStr:* #4c000000 是 30% 透明度的 #000000 的意思* 組成: # + 透明度 + 顏色* 算法: Math.floor(0.6 * 255).toString(16);*/ .rgba{background:rgba(0, 0, 0, 0.3);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000'); }?不過(guò)，我們得到的效果是這樣的，IE9 的透明度竟然有 60%!! 這顯然不是我們想法的。原因是：IE9 也支持 filter，使得 filter 的結(jié)果和 background-color 疊加，所以是 60%。具體參見(jiàn) DEMO 和示例圖:
那么我們可以利用 IE 的 HACK，單獨(dú)把 IE9 的 filter 變成透明度為 0 即可。高級(jí)瀏覽器大部分支持 :root 偽類，但不支持 filter 屬性，而 IE 只有 IE9 支持，所以我們可以這樣寫(xiě)。代碼如下：
:root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }?當(dāng)然，第二種方法可以應(yīng)用于 background，也可應(yīng)用于 border 上。整體的代碼可參見(jiàn) DEMO。最后，還是那句話，期待你更好的解決方案。
參考文獻(xiàn)：
- CSS background transparency without affecting child elements, through RGBa and filters
- MSDN: Gradient Filter
- MSDN: Alpha Filter
- IE9 Only Hack
?
轉(zhuǎn)載于:https://blog.51cto.com/3465667/702966
總結(jié)
- 上一篇： crontab 用法
- 下一篇： Jquery的集合方法EACH（）