CSS3 透明度属性--opacity

最新推荐文章于 2025-05-09 15:49:51 发布

si_yf

最新推荐文章于 2025-05-09 15:49:51 发布

阅读量793

点赞数 3

CC 4.0 BY-SA版权

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/si_yf/article/details/129982964

文章通过示例展示了CSS中的opacity属性如何设置元素的透明度，从0.1（完全透明）到1.0（完全不透明），并解释了如何通过改变值来影响元素的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

案例如下：

<!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>

结果如下图：