兼容各瀏覽器且效果一致，有兩種方法：
一、使用 opacity + Alpha Filter
其實見到這個的時候，我們的第一想法當然是 background + opacity，在不支持 opacity 的 IE 再使用 filter 的 alpha 濾鏡來實現。但是如果僅僅只是如此，這個最外層，最內層和文字，都被設置了 opacity（alpha 也是使用 opacity ）導致文字模糊 。當然，我們可以給各層設置 opacity 變回來，但這是很麻煩的事，所以我這里將文字放在外層的p標簽內，再給一個相對定位，（也可給絕對定位）讓其顯示在半透明的div里面。
代碼如下：
<!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" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> *{margin:0 auto;} body{background:url(006.jpg)} .div{ filter:Alpha(opacity=40); background:#000;/*實現IE背景透明*/ -moz-opacity:0.4;/*支持3.5以下低的火狐背景透明*/ opacity:0.4;/*支持3.5以上火狐遨游，opera等背景透明*/ width:500px; height:200px; border:1px solid #FF0; font-size:18px; text-align:center; font-weight:bold; margin-top:120px; } p{position:relative;width:500px;height:200px;top:-200px;left:0;color:#FFF;} </style> </head> <body> <div class="div"></div> <p>第一種：opacity+Alpha Filter：我是里面不透明的文字</p> </body> </html>
兼容標准瀏覽器及ie的6.0-9.0版本，預覽的效果為：
二、最佳實踐：rgba色彩 +Alpha Filter
其實我們可以選用 background-color: rgba() 來實現，同樣可以實現透明效果，並且只應用於當前元素，不繼承。而 IE 的 filter 卻會使內部文字變透明（ie8-ie6），雖然ie的filter有很多濾鏡效果，例如
(/*
- * filter 漸變濾鏡詳細用法，[參見這里]
- * StartColorStr 和 EndColorStr:
- * #4c000000 是 30% 透明度的 #000000 的意思
- * 組成: # + 透明度 + 顏色
- * 算法: Math.floor(0.6 * 255).toString(16);
- */
- .div{
- background:rgba(0, 0, 0, 0.3);
- filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
- }
)，來避免內部文字透明，但是這種方法不常見，也需要轉化，這里我們不用不常見的filter效果，還是用相對定位，避免文字的透明。
代碼如下：
<!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" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{margin:0 auto;}
body{background:url(006.jpg)}
.div{
background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0!important;/*實現FF背景透明*/
filter:Alpha(opacity=40); background:#000;/*實現IE背景透明*/
width:500px;
height:200px;
border:1px solid #FF0;
font-size:18px;
text-align:center;
font-weight:bold;
margin-top:120px;
}
:root .div{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }
p{position:relative;width:500px;height:200px;top:-200px;left:0;color:#FFF;}
</style>
</head>
<body>
<div class="div"></div>
<p>第二種：最佳實踐：rgba色彩 +Alpha Filter，我是里面不透明的文字</p> </body> </html>
預覽的效果為：
如果沒有
:root .div{ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }
IE9 的透明度竟然有 80%!! 這顯然不是我們想法的。原因是：IE9 也支持 filter，使得 filter 的結果和 background-color 疊加，所以是 80%。
這里我們可以利用IE HACK，單獨把 IE9 的 filter 變成透明度為 0 即可。高級瀏覽器大部分支持 :root 偽類，但不支持 filter 屬性，而 IE 只有 IE9 支持，所以我們可以這樣寫。至於ie10以及更高的版本還有待繼續測試。
ps：借鑒於高手的博客和自己的測試，有不對的地方，歡迎大家指正批評！