css實現(xiàn)背景透明文字不透明

設(shè)置元素的透明度:

-moz-opacity:0.8; /*在Firefox中設(shè)置元素透明度

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

但是當我們對一個標簽設(shè)置背景的透明度時,往往我們并不希望該標簽上的文字圖片也變成半透明了。

例如:

不透明

div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;

height:500px;color:#F30; font-size:32px; font-weight:bold; }

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

以前我曾經(jīng)是絕對定位的方法解決這個問題,也就是現(xiàn)在的p并不是div的子元素。

不透明

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

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

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

div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*實現(xiàn)FF背景透明,文字不透明*/

background:#000; filter:Alpha(opacity=20);/*實現(xiàn)IE背景透明*/

width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}

div p{ position:relative;}/*實現(xiàn)IE文字不透明*/

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

所以我們給不想被透明的標簽設(shè)置一個定位屬性,問題接能解決了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,168評論 1 92
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,377評論 0 8
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,308評論 0 11
  • 題石: 濯發(fā)水云間 文/趙春苗 莫道幽思何所似,女兒濯發(fā)水...
    鳥人的羽毛閱讀 223評論 0 2
  • 一切都有一個開始! 有開始,就有結(jié)束!何時結(jié)束? 有生,即有死!有苦,就有樂!有歡笑,就有痛苦!有開心,就有郁悶!...
    吳桂斌閱讀 275評論 0 2

友情鏈接更多精彩內(nèi)容