常用的CSS透明屬性有哪些-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“常用的CSS透明屬性有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供寧縣網(wǎng)站建設(shè)、寧縣做網(wǎng)站、寧縣網(wǎng)站設(shè)計、寧縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、寧縣企業(yè)網(wǎng)站模板建站服務(wù)，十年寧縣做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

代碼如下:

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

 
上面的幾個屬性分別是：

代碼如下:

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

 
CSS透明度繼承問題

但CSS的透明屬性涉及到一個繼承問題，當為父級元素設(shè)置透明度后，子元素將自動繼承其透明度，比如這樣的一個效果:

 
即使你又為子元素指定透明度為1也是無效的。
 
對于子元素是文字的情況，我的解決方法一般是如果多少還能夠看清，就不管。另一個折衷的方法是，為文本子元素指定一個相對更深的顏色。也就是說，當子元素繼承透明度后，所得到的文本顏色正好就是你想要的。前提是，這個顏色還有加深的可能，和需要詳細的計算顏色和透明度的值。
 
還有一種方法就是，透明層獨立出來，如下代碼，先.mod設(shè)置position:relative;然后.mask-layer設(shè)置position:absolute;z-index:1;最后.title設(shè)置position:absolute;z-index:2;

代碼如下:

<div class="mod">
   <img src="images/QQ截圖20140411111512.png" alt="" />
   <p class="mask-layer"></p>
   <p class="title">小清新，你喜歡嗎</p>
</div>

“常用的CSS透明屬性有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享文章：常用的CSS透明屬性有哪些-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article42/dsphhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)站設(shè)計、商城網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)