如何實現背景透明,文字不透明


重點內容入口:

IE6和部分IE7內核的瀏覽器會讀懂rgba
IE專屬濾鏡 filter:Alpha的兼容處理
背景透明,文字不透明全兼容方案

測試瀏覽器:

VirtIE6、虛擬機下XP的IE6、純正IE8、純正IE8下QQ瀏覽器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ瀏覽器8.0-IE10.0.5、safari 5.1.7、opera 25.0
如何實現背景透明,文字不透明,兼容所有瀏覽器?

我們平時所說的調整透明度,其實在樣式中是調整不透明度,如下圖所示例:

打開ps,在圖層面板上,可以看到設置圖層整理不透明度的菜單,從 0% (完全透明)到 100%(完全不透明)。

實現透明的css方法通常有以下3種方式,以下是不透明度都為80%的寫法

css3的opacity:x,x 的取值從 0 到 1,如opacity: 0.8
css3的rgba(red, green, blue, alpha),alpha的取值從 0 到 1,如rgba(255,255,255,0.8)
IE專屬濾鏡 filter:Alpha(opacity=x),x 的取值從 0 到 100,如filter:Alpha(opacity=80)

css3的opacity

兼容性:IE6、7、8不支持,IE9及以上版本和標准瀏覽器都支持

使用說明:設置opacity元素的所有后代元素會隨着一起具有透明性,一般用於調整圖片或者模塊的整體不透明度
復制代碼

opacity

背景透明,文字也透明

復制代碼

使用opacity后整個模塊都透明了,展現如下:

那么使用opacity實現《背景透明,文字不透明》是不可取的。
css3的rgba

兼容性:IE6、7、8不支持,IE9及以上版本和標准瀏覽器都支持

使用說明:設置顏色的不透明度,一般用於調整background-color、color、box-shadow等的不透明度。
復制代碼

css3的rgba

背景透明,文字也透明

復制代碼

在background-color中使用rgba,標准瀏覽器中,背景透明,文字不透明,展現如下:

很奇葩的是,IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂rgba,解析后顏色為透明,其實應該是null

那么使用opacity實現背景透明,文字不透明是可取的。
IE專屬濾鏡 filter:Alpha(opacity=x)

使用說明:IE瀏覽器專屬,問題多多,本文以設置背景透明為例子,如下:

僅支持IE6、7、8、9,在IE10版本被廢除
在IE6、7中,需要激活IE的haslayout屬性(如:*zoom:1或者*overflow:hidden),讓它讀懂filter:Alpha
在IE6、7、8中,設置了filter:Alpha的元素,父元素設置position:static(默認屬性),其子元素為相對定位,可讓子元素不透明

復制代碼

opacity

背景透明,文字不透明

復制代碼
全兼容的方案

上以上3點分析可知,設置透明背景文字不透明,可采用的屬性有rgba和IE的專屬濾鏡filter:Alpha,其兼容性如下圖所示:

針對IE6、7、8瀏覽器,我們可以采用fiter:Alpha,針對標准瀏覽器我們采用rgba,那么問題來了,IE9瀏覽器2個屬性都支持,一起使用會重復降低不透明度...

那么,如何只對IE6、7、8使用fiter:Alpha如何實現呢?2年前寫過《CSS hack整理》一文,最新我也做了點更新,里面有IE的相關hack,找到只支持IE 6、7、8的方案,如下:

/* 只支持IE6、7、8 */

@media \0screen,screen\9 {...}

ok,所有問題都解決了,全部代碼如下:
復制代碼

背景透明,文字不透明

背景透明,文字不透明

復制代碼

下載demo

可能很多同學會覺得很復雜,為什么不直接用兩個DIV放在同一個位置就行了,一個不透明DIV,一個文字DIV,很簡單的解決問題,這也是好個方法,但是需要寫絕對定位或負margin,並出現空內容的DIV,而且這是這種方法在有些場景下也會顯得復雜,如下示例,鼠標經過商標后展現展現透明的提示文案,就需要控制2個DIV啦~

一點思路,如果疑問,歡迎大家留言交流~

作者:白樹

出處:http://peunzhang.cnblogs.com/

如果您覺得本文對您的學習有所幫助,可通過“微信”或“支付寶”打賞博主,或者點擊頁面右下角【好文要頂】支持博主。

很多人在看的文章

《pageResponse - 讓H5適配移動設備全家》

《移動web資源整理》

《移動web點5像素的秘密》

《移動web使用css3實現跑步》

《移動web頁面使用字體的思考》

《高清顯示屏原理及設計方案》

《css實現兩端對齊的3種方法》


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com