css中rgba()和opacity的区别

最新推荐文章于 2024-04-26 19:17:54 发布

参星~

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量532

点赞数

分类专栏： css、css3

本文链接：https://blog.csdn.net/qq_38871723/article/details/106149222

版权

css、css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

rgba的定义和用法

RGBA(R,G,B,A)
RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。
取值：
R：红色值。正整数(0~255) | 百分数
G：绿色值。正整数(0~255) | 百分数
B：蓝色值。正整数(0~255) | 百分数
A：Alpha透明度,取值0~1之间，0表示不透明，1表示全透明。

opacity的定义和用法

opacity:value
Opacity属性设置一个元素了透明度级别。

取值为不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

区别

子元素opacity会继承父元素的 opacity 属性，后代元素的颜色都变透明。

RGBA设置的元素的后代元素不会继承不透明属性，只让当前元素的颜色变透明。

示例：
rgba()

<style type="text/css">
			#parent{
				width: 200px;
				height: 200px;
				background-color: rgba(0,255,0,0.3);
		}
		#child{
			width: 100px;
			height: 100px;
			background-color: #00f;
		}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="child">
			</div>
		</div>
	</body>

在这里插入图片描述
opacity:

	<style type="text/css">
			#parent{
				width: 200px;
				height: 200px;
				background-color: #0f0;
				opacity:0.3;
		}
		#child{
			width: 100px;
			height: 100px;
			background-color: #00f;
		}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="child"></div>
		</div>
	</body>

在这里插入图片描述

参星~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css中rgba()和opacity的区别

rgba的定义和用法RGBA(R,G,B,A)RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。取值：R：红色值。正整数(0~255) | 百分数G：绿色值。正整数(0~255) | 百分数B：蓝色值。正整数(0~255) | 百分数A：Alpha透明度,取值0~1之间，0表示不透明，1表示全透明。opacity的定义和用法opacity:valueOpacity属性设置一个元素了透明度级别。取值为不透明度。从 0.0 （完全透明）到 1.
复制链接

扫一扫