最近因?yàn)楣ぷ餍枰?#xff0c;需要自定義彈窗，并讓背景透明。因?yàn)樽约阂彩浅鯇W(xué)者，就碰到了比較經(jīng)典的問(wèn)題。

看代碼

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

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

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

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

上面的幾個(gè)屬性分別是:

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

上面的例子涉及到透明屬性的繼承問(wèn)題

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

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

具體寫(xiě)法可參考：css透明繼承問(wèn)題

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

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

總結(jié)

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

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