div css實現背景透明

2021-07-02 20:34:24 字數 2150 閱讀 5506

重點內容入口: 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 * body .demo .demo p

背景透明,文字也透明

複製**

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

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

css3的rgba

相容性:ie6、7、8不支援,ie9及以上版本和標準瀏覽器都支援

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

複製**

css3的rgba

* body

.demo

.demo p

背景透明,文字也透明

複製**

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

很奇葩的是,ie6和部分ie7核心的瀏覽器(如qq瀏覽器)會讀懂rgba,解析後顏色為透明,其實應該是null

那麼使用opacity實現背景透明,文字不透明是可取的。

僅支援ie6、7、8、9,在ie10版本被廢除

在ie6、7中,需要啟用ie的haslayout屬性(如:*zoom:1或者*overflow:hidden),讓它讀懂filter:alpha

在ie6、7、8中,設定了filter:alpha的元素,父元素設定position:static(預設屬性),其子元素為相對定位,可讓子元素不透明

複製**

opacity

* body

.demo

.demo p

背景透明,文字不透明

複製**

全相容的方案

上以上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,所有問題都解決了,全部**如下:

複製**

背景透明,文字不透明

*body

.demo

.demo p

@media \0screen,screen\9

.demo p

}背景透明,文字不透明

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

Qt實現QTextEdit背景透明

qtextedit為什麼要拿出來單獨說,因為它繼承自qabstractscrollarea,一般的設定無效。滾動區域scrollarea內部有乙個widget,需要同時設定scrollarea和viewport兩個視窗才能實現透明。如下 m text editor setwindowflags qt...

怎麼實現背景透明而文字不被透明

前言 我們知道使用opacity可以實現透明效果,相容語句是 filter alpha opacity 0 100 但是它具有父子繼承特性,怎麼實現我們想要的效果呢?方法一 運用css3的屬性rgba r,g,b,a ie8以上的版本可以達到我們的要求 r 紅色值。正整數 百分數 g 綠色值。正整數...

背景半透明

css中在希望半透明的部分後面新增如下 filter alpha opacity 10 moz opacity 1 opacity 0.1 句中的數字就是你希望半透明的程度,越小透明度越高。其實就是新增乙個濾鏡。三句話中第乙個是支援ie,第二個和第三個都是支援firefox的不同版本。比如說設定好背...