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

2022-11-24 22:51:43 字數 2007 閱讀 8676

之前做了個半透明彈層,但設定背景半透明時,子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹,在這裡做一些總結,方便以後使用。

背景透明,文字不透明的解決方法:

為元素新增一個絕對定位的子元素,設定大小和該元素一樣,把半透明加在絕對定位元素上作為遮罩,z-index設定到最底部,達到背景半透明效果。

使用css3新屬性rgba。

實現透明的方法:

谷歌瀏覽器下測試各種屬性,如下圖。

沒有設定透明度

用opacity設定透明度

用rgba設定透明度

ie專屬filter設定透明度

圖1

css3的opacity:

由圖1可以看出,使用opacity屬性的第二個方塊其子元素包含的文字也變成了半透明。

註釋:設定opacity元素的所有後代元素會隨著一起具有透明性,一般用於調整或者模組的整體不透明度,相容ie9及以上版本和標準瀏覽器。

css3的rgba:

由圖1可看出,設定rgba的方塊可實現背景色透明,並且子元素包含的文字不透明。

註釋:ie9+、firefox 3+、chrome、safari 以及 opera 10+都支援。

ie的filter : alpha(opacity=x):

全相容:

ie6ie7

ie8ie9

標準瀏覽器

rgba✘✘

✘✔✔filter : alpha✔✔

✔✔✘只支援ie6、7、8瀏覽器的css hack:

/* 只支援ie6、7、8 */

@media \0screen\,screen\9

demo:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>背景透明,文字不透明

title

>

<

style

>

*body

.test-opacity

/*只支援ie6、7、8

*/@media \0screen\,screen\9

.test-opacity p

}style

>

<

body

>

<

div

class

="test-opacity"

>

<

p>背景透明,文字不透明

p>

div>

body

>

html

>

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

CSS實現DIV層背景透明而文字不透明

在我們設計製作一些網頁的時候可能會用到半透明的效果,首先我們可能會想到用png處理,當然這是一個不錯的辦法,唯一的相容性問題就是ie6 下的bug,但這也不困難,加上一段js處理就行了。但假如我們需要一個半透明遮罩的彈出層,如登陸框 註冊框 提示等,這時可能需要整個頁面都要被半透 明的遮罩層覆蓋,那...

CSS實現背景透明,文字不透明,相容所有瀏覽器

我們平時調整的不透明度如圖所示 實現透明的css方法通常有以下3種方式,以下是不透明度都為80 的寫法 相容性 ie6 7 8不支援,ie9及以上版本和標準瀏覽器都支援,如圖所示 背景透明,文字也透明 使用opacity後整個模組都透明瞭,展現如下 那麼使用opacity實現 背景透明,文字不透明 ...

CSS實現背景透明,文字不透明(相容各瀏覽器)

在 ff chrome 等較新的瀏覽器中可以使用css屬性background color的rgba輕鬆實現背景透明,而文字保持不透明。而ie6 7 8瀏覽器不支援 rgba,只有使用ie的專屬濾鏡filter alpha來實現,但是這樣寫法會把文字也變為透明,因此只有在透明容器的子節點 文字節點除...