CSS實作背景透明，文字不透明（與各瀏覽器相容）-css教學-PHP中文網

CSS實作背景透明，文字不透明（與各瀏覽器相容）

巴扎黑

發布： 2017-04-05 16:27:51

原創

1653 人瀏覽過

在 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 >
##>