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

2022-06-16 23:09:15 字數 3709 閱讀 8924

我們平時調整的不透明度如圖所示：

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

相容性：ie6、7、8不支援，ie9及以上版本和標準瀏覽器都支援,如圖所示：

>背景透明，文字不透明

title

>

<

style

>

*body

.demo

.demo p

style

>

head

>

<

body

>

<

div

class

="demo"

>

<

p>背景透明，文字也透明

p>

div>

body

>

html

>

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

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

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

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

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


/>


<


title


>背景透明，文字不透明


title


>


<


style


>


*body


.demo


.demo p


style


>


head


>


<


body


>


<


div 


class


="demo"


>


<


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


p>


div>


body


>


html


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

這種寫法是可以實現背景透明，文字不透明的，只是ie8及低版本不支援。

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

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

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

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


/>


<


title


>背景透明，文字不透明


title


>


<


style


>


*body


.demo


.demo p


style


>


head


>


<


body


>


<


div 


class


="demo"


>


<


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


p>


div>


body


>


html


>
上以上3點分析可知，設定透明背景文字不透明，可採用的屬性有rgba和ie的專屬濾鏡filter:alpha

針對ie6、7、8瀏覽器，我們可以採用fiter:alpha，針對標準瀏覽器我們採用rgba，那麼問題來了，ie9瀏覽器2個屬性都支援，一起使用會重複降低不透明度...

那麼，如何只對ie6、7、8使用fiter:alpha如何實現呢，找到只支援ie 6、7、8的方案，如下：

/*


只支援ie6、7、8 


*/@media \0screen\,screen\9
所以相容所以瀏覽器的**如下：

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


/>


<


title


>背景透明，文字不透明


title


>


<


style


>


*body


.demo


.demo p


@media \0screen\,screen\9 


.demo p


}style


>


head


>


<


body


>


<


div 


class


="demo"


>


<


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


p>


div>


body


>


html


>
有的網友覺得這樣做沒有必要，我覺得也沒有必要，這只是實現背景透明，文字不透明的一種相容方式而已，還有其他的解決辦法。

比如：兩個div放在同乙個位置就行了，乙個透明div，乙個文字div，也能實現，就是需要定位。

如果要相容低版本瀏覽器，我一般還是切透明，放在背景裡面，這樣既不用寫這麼多樣式，也不用需要定位就能解決。（如果背景不是單一的透明顏色，只有切成才行）。

css實現背景透明文字不透明

設定元素的透明度 moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明但是當我們對乙個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明p div div 可以很明顯的看出文字也被半透明...

css實現背景透明文字不透明

moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明 但是當我們對乙個標籤設定背景的透明度時，往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明 div可以很明顯的看出文字也被半透明的，這是我們不想看到的效果。...

css實現背景透明，文字不透明

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