下面是一段利用纯CSS代码来控制HTML元素的透明度，IE浏览器使用滤镜（filter）来实现透明度控制，而Firefox、Safair等通过自定义的属性来实现。如下：
/* IE滤镜，透明度50% */
filter:alpha(opacity=50);
/* Firefox私有，透明度50% */
-moz-opacity:0.5;
/* 支持Safair1.X版本 */
-khtml-opacity: 0.5;
/* 其他，透明度50% */
opacity:0.5;上面的几个属性分别是:
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
实例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS控制透明度</title>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<meta name="Keywords" content="CSS,透明度" />
<meta name="Description" content="CSS控制透明度" />
<style type="text/css">
div.outcontainer {
height: 200px;
line-height: 20px;
width: 300px;
margin: 20px;
border: 1px solid #F0F0F0;
background: #F8F8F8;
padding: 10px;
position: relative;
}
div.outcontainer div.opacity {
height: 100px;
width: 150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -50px;
background: #000;
/*透明度设置*/
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="outcontainer">
利用CSS控制透明度不是很麻烦，如下：<br/><br/> /* IE滤镜，透明度50% */<br/> filter:alpha(opacity=50);
<br/><br/> /* Firefox私有，透明度50% */<br/> -moz-opacity:0.5;
<br/><br/> /* 其他，透明度50% */<br/> opacity:0.5;
<br/>
<div class="opacity"></div>
</div>
</body>
</html>效果图：
但是还是会有很多问题，浏览器兼容性问题等等，而且IE滤镜的频繁使用会使浏览器的执行效率降低。 所以不提倡过多使用滤镜，你也还有其他方法可以模拟，比如用宽高都是1px的透明png图片覆盖等等。
川公网安备51010802032098
