背景透明但文字不透明的實現方法 相容所有瀏覽器

實現透明的css方法

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

1.css3的 opacity:x，x 的取值從 0 到 1，如opacity: 0.8

設定opacity元素的所有後代元素會隨著一起具有透明性，一般用於調整或者模組的整體不透明度。

2.css3的 rgba(red, green, blue, alpha)，alpha的取值從 0 到 1，如rgba(255,255,255,0.8)

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

在background-color中使用rgba，標準瀏覽器中，背景透明，文字不透明，

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

3.ie專屬濾鏡 filter:alpha(opacity=x)，x 的取值從 0 到 100，如filter:alpha(opacity=80)

ie瀏覽器專屬，問題多多：

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

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

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

實現全相容的方法

設定透明背景文字不透明，可採用的屬性有rgba和ie的專屬濾鏡filter:alpha，

針對ie6、7、8瀏覽器，我們可以採用fiter:alpha，針對標準瀏覽器我們採用rgba，那麼問題來了，ie9瀏覽器2個屬性都支援，一起使用會重複降低不透明度（這個經在ie9中測試貌似並沒有什麼變化）

讓濾鏡只支援ie6、7、8 的方法:@media \0screen\,screen\9

完整demo

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
>

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>
html
>

元素實現背景透明，文字不透明方法

很多剛入門的前端同學在切頁面的時候會遇到乙個需求，就是讓某個區塊的元素設定乙個透明度。如下圖 大多數同學會採用opacity這個css樣式屬性，但是用它的話會導致乙個問題，圖中的文字也會變成透明的了。因為這個樣式是會傳遞給父元素包裹的自元素。那麼我們換種實現方法看看效果如何，我們用 css3的bac...

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可以很明顯的看出文字也被半透明的，這是我們不想看到的效果。...