元素透明度样式

opacity样式控制元素的透明度
透明数值0 到不透明数值1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				/* 清楚元素默认样式 */
				margin: 0px;
				padding: 0px;
			}
			
			body{
				position: relative;
			}
			
			.red {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 20px;
				left: 50px;
				z-index: 10;
				opacity: 0.5;
			}

			.green {
				width: 200px;
				height: 200px;
				background-color: green;
				position: absolute;
				top: 20px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="red">
			红色元素
		</div>
		<div class="green">
			红色元素透明后可以看到我的字
		</div>
	</body>
</html>

posted @ 2024-12-12 23:31  觉远  阅读(18)  评论(0)    收藏  举报