這裡用到了IE的filter的濾鏡效果，background:rgba是CSS3屬性，大家都知道。
最後一句是針對IE9的。用了結構性偽類 E:root : {attribute} , 偽類:root 僅支援CSS3的瀏覽器 ，所以這段CSS是相容所有瀏覽器的。
核心代碼
| 代碼如下 |
複製代碼 |
#header{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E518515F', endColorstr='#E518515F');
background:rgba(24, 81, 95, 0.9);
}
:root #header { filter:none; }/*把IE9的filter去掉，因為IE9也支援background:rgba()，所以去掉filter，不然會導致重複*/ |
執行個體
| 代碼如下 |
複製代碼 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
IE背景半透明
</title>
<style type="text/css">
.alpha{
width: 100px;
height: 100px;
color: #fff;
background: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)9;
}
:root .alpha{
filter: none; /*for IE9*/
}
</style>
</head>
<body>
<div class="alpha">
文字文字
</div>
</body>
</html> |
