淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 透明度属性--opacity

opacity指定了一个元素的透明度，其默认值为1

值描述
value指定透明度（0-1），从0.0（完全透明）到1.0（完全不透明）
inheritopacity属性的值应该从父元素继承

 案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 500px;
				background-color: aqua;
				opacity: 0.1;
			}

			.box2 {
				width: 500px;
				background-color: aqua;
				opacity: 0.5;
			}

			.box3 {
				width: 500px;
				background-color: aqua;
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="box1">this is  box1 -- 透明度为0.1</div>
		<div class="box2">this is  box2 -- 透明度为0.5</div>
		<div class="box3">this is  box3 -- 透明度为1</div>
	</body>
</html>

 结果如下图：

 从上图可以看出，三个div的opacity属性从0.1到1，依次变得不透明  0.5为半透明