opacity、transparent、rgba及hsla的区别

opacity

.box {
        width: 300px;
	height: 300px;
	margin: 100px auto;
	background: orange;
	opacity: 0.2;
 }

• opacity只能针对整个盒子设置透明度
• 子盒子及内容会继承父盒子的透明度

transparent

.inner {
	width: 150px;
	height: 150px;
	background: transparent;
}

• 不可调节透明度，始终完全透明
• 无法实现关透明

rgba

.inner {
	width: 150px;
	height: 150px;
	background: rgba(255, 255, 255, 0.5);
}

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。

hsla

.box {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	background: hsla(120, 50%, 50%, 0.7);
	border: 20px solid rgba(255, 0, 0, 0.2);
}

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

转载于:https://my.oschina.net/yardbaby/blog/1785362