CSS透明度技巧-优快云博客

1 除了IE6.7.8的现代浏览器的解决方法

<html>
	<head>
		<style type="text/css">
			.caseCss{
				height:50px;
				width:50px;
				position:relative;
				margin:0 auto;
				/*相同Test的样式*/
			}
			.test1{
				top:50px;
				background-color:red;
			}
			.test2{
				height:50px;
				width:50px;
				background-color:blue;
				position:relative;
				margin:0 auto;
				top:30px; /*TOP是相对于前一个元素的位置 在此例中相对于TEST1定为*/
				left:30px;
				opacity:0.5;
				
			}
		</style>
		<title>透明度的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div class="test1 caseCss"></div>
		<div class="test2 caseCss"></div>
	</body>
</html>

2兼容旧式IE浏览器（6.7.8)的解决方法

<html>
	<head>
		<style type="text/css">
			.caseCss{
				height:50px;
				width:50px;
				position:relative;
				margin:0 auto;
				/*相同Test的样式*/
			}
			.test1{
				top:50px;
				background-color:red;
			}
			.test2{
				height:50px;
				width:50px;
				background-color:blue;
				position:relative;
				margin:0 auto;
				top:30px; /*TOP是相对于前一个元素的位置 在此例中相对于TEST1定为*/
				left:30px;
				filter:alpha(opacity=50); /*IE6.7.8的解决方式*/
				opacity:0.5;/*现代浏览器不支持过滤器*/
				
			}
		</style>
		<title>透明度的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div class="test1 caseCss"></div>
		<div class="test2 caseCss"></div>
	</body>
</html>

但是这带来一个问题设置透明度的浏览器中的文字也会变为透明，解决方法使用CSS3新属性 background:rgba(*,*,*,*); 其中前三位为RGB颜色，第四位为透明度，例子如下

background:rgba(255,0,0,0.5);

4 不影响字体的CSS3的新透明度属性（不兼容IE678）

<html>
	<head>
		<style type="text/css">
			.caseCss{
				height:50px;
				width:50px;
				position:relative;
				margin:0 auto;
				/*相同Test的样式*/
			}
			.test1{
				top:50px;
				background-color:red;
			}
			.test2{
				height:50px;
				width:50px;
				background-color:blue;
				position:relative;
				margin:0 auto;
				top:30px; /*TOP是相对于前一个元素的位置 在此例中相对于TEST1定为*/
				left:30px;
				border:1px solid #000; /*若没有边框，会造成当前元素被上方元素覆盖*/
				background:rgba(255,0,0,0.5);
				
			}
		</style>
		<title>透明度的使用</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
	<body>
		<div class="test1 caseCss"></div>
		<div class="test2 caseCss">11</div>
	</body>
</html>

兼容IE6.7.8的方式略