新聞中心
本篇內(nèi)容介紹了“常用的CSS透明屬性有哪些”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
十年的澤州網(wǎng)站建設(shè)經(jīng)驗,針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動調(diào)整澤州建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計,從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“澤州網(wǎng)站設(shè)計”,“澤州網(wǎng)站推廣”以來,每個客戶項目都認真落實執(zhí)行。
代碼如下:
.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;
代碼如下:

小清新,你喜歡嗎
“常用的CSS透明屬性有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
新聞標題:常用的CSS透明屬性有哪些
本文來源:http://fisionsoft.com.cn/article/jhhjse.html