htmlstuty
/
opacity.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>poacity</title>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background-color: blue;
				position: relative;
				z-index: 1;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 100px
				z-index: 2;
			}

			.box3 {
				width: 200px;
				height: 200px;
				background-color: green;
				position: absolute;
				left: 200px;
				top: 200px
				z-index: 3;
				/* 设置元素的透明背景
				 * opacity可以用来设置元素背景的透明
				 * 它需要一个0-1的值，0完全透明，1完全不透明，0.5半透明
				 * 注意，如果有z-index
				 * opacity必须放到z-index下面，否则透明效果无效
				 *
				 * opacity这个属性，在IE8及以下的浏览器不支持
				 * IE8及以下的浏览器需要使用如下属代替
				 */
				opacity: 0.5;
				/* opacity这个属性，在IE8及以下的浏览器不支持
				 * IE8及以下的浏览器需要使用如下属代替，这种方式支持IE6
				 * filter:alpha(opacity=透明度)
				 * 透明度，0-100，0完全透明，100完全不透明
				 */
				filter:alpha(opacity=50)
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>