最近因為工作需要，需要自定義彈窗，并讓背景透明。因為自己也是初學(xué)者，就碰到了比較經(jīng)典的問題。

看代碼

<div class="top">
<div class="sub">css opacity attribute!</div>
</div>

以上結(jié)構(gòu)，如果設(shè)置top的opacity屬性來達(dá)到透明效果時，你會發(fā)現(xiàn)，里面的元素全部繼承了透明的效果，這顯然不能達(dá)到要求。至少字體總得看的清楚吧。
從網(wǎng)上搜羅了下相關(guān)知識點

先給出標(biāo)準(zhǔn)的css透明寫法，兼容大部分瀏覽器

.top {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

上面的幾個屬性分別是:

• opacity: 0.5; 這是最重要的，因為它是CSS標(biāo)準(zhǔn).該屬性支持Firefox、Safari和 Opera.
• filter:alpha(opacity=50); 這個是為IE6設(shè)的，可取值在0-100，其它三個0到1.
• -moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla瀏覽器。
• -khtml-opacity: 0.5; 這個為了支持一些老版本的Safari瀏覽器。

上面的例子涉及到透明屬性的繼承問題

標(biāo)準(zhǔn)的是，當(dāng)父元素設(shè)置了透明屬性，其子元素也會跟著繼承透明屬性，很多會馬上想到，把子元素重新設(shè)置opacity：1,但是很可惜，這是無效的。有些人為了省時間，可能當(dāng)子元素里面的內(nèi)容多少還看得清楚的時候，就這點問題就會忽略不計。當(dāng)然，也有很多需求是需要完全不透明的內(nèi)容。

比較有用的一個方法就是，添加多一個div（子元素），這個div和你要顯示的內(nèi)容塊是屬于兄弟關(guān)系，那么給Div和內(nèi)容塊設(shè)置絕對定位，然后給div設(shè)置透明度，此時的內(nèi)容塊會覆蓋在上面，也就模擬了我們所要的效果。

具體寫法可參考：css透明繼承問題

以上內(nèi)容部分來自帕蘭印象

轉(zhuǎn)載于:https://www.cnblogs.com/ilexcai/archive/2011/10/08/2201701.html

總結(jié)

以上是生活随笔為你收集整理的css 透明属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。