CSS中RGBA()和opcity改变透明度的区别

最新推荐文章于 2025-03-10 14:52:46 发布

Hairui瑞

最新推荐文章于 2025-03-10 14:52:46 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_44322357/article/details/90903655

前端专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在网页设计中，RGBA与Opacity两种方法在调整元素透明度时的区别。通过实例展示，说明了RGBA仅影响背景色透明度，而Opacity则会同时影响背景色和文字的透明度。

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

在制作一些半透明的小图标的时候，有两种方法使不透明的图标变半透明，下面看一下两者的区别
RGBA（）

在RGBA模式中，前三个参数是控制颜色，最后一个参数控制透明度
最后一个参数在0—1之间，可以是小数。当它为0时代表完全透明，为1代表不透明

opcity

opcity也可以调整透明度，取值范围也在0—1之间，当它为0时代表完全透明，为1代表不透明

下面来看一张图看他们之间的区别

在这里插入图片描述
通过图片可以看到，使用RGBA()改变透明度的时候，不会改变文字的透明度，而使用opcity改变透明的的时候，文字的透明度也会被一起改变。

<!DOCTYPE html>
<html lang="zh">
<head>
	<title></title>
	<style type="text/css">
		body{
			background-color: cadetblue;
		}
		.blue{
			width: 100px;
			height: 30px;
			background-color: blue;
			opacity: 0.1;
			color: white;
		}
		.red{
			width: 100px;
			height: 30px;
			background-color: rgba(0,255,0,0.1);
			color: white;
		}
	</style>
</head>
<body>
	<div class="blue">this is RGBA.</div>
	<div class="red">this is opcity.</div>

</body>
</html>