You are here
css 实现层半透明，且块内文字不透明（兼容ie6等各种浏览器）
我一般用的是 #divJeepDiv {
filter: alpha(opacity=50); /*ie*/
opacity: 0.5;/*firfox*/
}
css 实现层半透明，且块内文字不透明（兼容ie6等各种浏览器）
兼容各浏览器且效果一致，有两种方法：
一、使用 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以及更高的版本还有待继续测试。
