首頁 > web前端 > css教學 > CSS實作背景透明,文字不透明(與各瀏覽器相容)

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

巴扎黑
發布: 2017-04-05 16:27:51
原創
1684 人瀏覽過

在 FF/Chrome 等較新的瀏覽器中可以使用css屬性background-color的rgba輕鬆實現背景透明,而文字保持不透明。而IE6/7/8瀏覽器不支援rgba,只有使用IE的專屬濾鏡filter:Alpha來實現,但是這樣寫法會把文字也變成透明,因此只有在透明容器的子節點(文字節點除外)內設定position:relative才能不繼承其父元素的透明濾鏡,程式碼如下:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">
<html xmlns#=" http: //www.w3.org/1999/xhtml">
##<head>
<meta http-equiv#="Content-Type" 內容="text/html; charset=utf-8" #/>
<標題>Web開發者網路- www.admin10000.com
標題##>
#<樣式類型= text/css">
.warp{ 背景: #eee url(back.jpg ) 不重複左上;寬度:#440px; 高度#:400px##;    邊框:1px 實心#ccc ;}
.內容{寬度:180px ;高度:260px#;邊距: 0px 自動; 填充:#30px 30px; 背景:rgba(255, 255, 255, 0.6)!重要;filter:Alpha(opacity=60);# background:# #fff; /* 使用IE專屬濾鏡實作IE背景透明*/#}
.content p{# position:relative;} /*#實作IE文字不透明*/
###style>
head>
<body>
<p class#="warp"#>
<p class="content"><p >Admin10000.com 是WEB開發者學習交流必備網站。 Admin10000.com 是WEB開發者學習交流必備網站。 Admin10000.com 是WEB開發者學習交流必備網站。 Admin10000.com 是WEB開發者學習交流必備網站。 Admin10000.com 是WEB開發者學習交流必備網站。 Admin10000.com 是WEB開發者學習交流必備網站。 p>p>
##p#>
#body >
##>

 

# 以上程式碼在IE6.0+/FF3.0+/Opera10+/Chrome/Safari 皆測試通過

###

以上是CSS實作背景透明,文字不透明(與各瀏覽器相容)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板