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

2021-07-11 00:57:26 字數 741 閱讀 9241

設定元素的透明度:

-moz-opacity

:0.8; /*在firefox中設定元素透明度

filter: alpha(opacity=80); /*ie使用濾鏡設定透明

但是當我們對乙個標籤設定背景的透明度時,往往我們並不希望該標籤上的文字也變成半透明了。

例如:

不透明p>

div>

div

可以很明顯的看出文字也被半透明的,這是我們不想看到的效果。

以前我曾經是絕對定位的方法解決這個問題,也就是現在的p並不是div的子元素。

div>

不透明p>

這樣div的半透明效果也就不會影響到元素p了。最後在將p定位到需要的位置。

但是很多時候這樣的標籤並不是很合理,有可能還會多浪費幾個標籤。

下面的這種方法就可以解決上面的問題了:

div

divp/*實現ie文字不透明*/

火狐我們直接用rgba顏色就可以解決子標籤跟著半透明的問題了,但是ie還不是能很好的支援。

所以我們給不想被透明的標籤設定乙個定位屬性,問題接能解決了。

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不支援,...

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

之前做了個半透明彈層,但設定背景半透明時,子元素包含的字型及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹,在這裡做一些總結,方便以後使用。背景透明,文字不透明的解決方法 為元素新增乙個絕對定位的子元素,設定大小和該元素一樣,把半透明加在絕對定位元素上作為遮罩,z index設定到最...