溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“常用的CSS透明屬性有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
代碼如下:
.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設的，可取值在0-100，其它三個0到1.
-moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla瀏覽器。
-khtml-opacity: 0.5; 這個為了支持一些老版本的Safari瀏覽器。
CSS透明度繼承問題
但CSS的透明屬性涉及到一個繼承問題，當為父級元素設置透明度后，子元素將自動繼承其透明度，比如這樣的一個效果:
即使你又為子元素指定透明度為1也是無效的。
對于子元素是文字的情況，我的解決方法一般是如果多少還能夠看清，就不管。另一個折衷的方法是，為文本子元素指定一個相對更深的顏色。也就是說，當子元素繼承透明度后，所得到的文本顏色正好就是你想要的。前提是，這個顏色還有加深的可能，和需要詳細的計算顏色和透明度的值。
還有一種方法就是，透明層獨立出來，如下代碼，先.mod設置position:relative;然后.mask-layer設置position:absolute;z-index:1;最后.title設置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透明屬性有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
