详解：39 css3新增颜色属性 hsl hsla rgb rgba

本文链接：https://blog.csdn.net/qq_37805832/article/details/107572271

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>	
		div
		{
			width: 300px;
			height: 300px;
			border: 1px solid red;
		}
		.box1
		{
			background-color: #000;
			opacity: .5;
			filter: alpha(opacity=50);
			color: white;
		}
		.box2
		{
			background-color: rgba(0,0,0,0.5);

		}
		.box3
		{
			background-color: hsl(0,100%,50%);
		}
		.box4
		{
			background-color: hsla(9,35%,55%,0.73);
		}
		.box5
		{
			background-color: rgba(180,112,100,0.73);
		}
		.box6
		{
			background-color: transparent;
		}
		.box7
		{
			color: pink;
			border: 1px solid currentColor;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
	<div class="box6"></div>
	<div class="box7"></div>
	<div class="box8"></div>
</body>
</html>

在这里插入图片描述

opacity: .5;
filter: alpha(opacity=50);

为什么要联合写，因为filter: alpha(opacity=50);只有ie支持，其他浏览器不支持，opacity: .5;这个ie不支持这个。其他浏览器都支持。
两个都写的话，那哪一个浏览器都支持了呀。

background-color: rgba(0,0,0,0.5);

最后一个是透明度，0~1之间的透明度。

0(0%)为透明，1不透明(100%)。

background-color: hsl(0,100%,50%);

HSL即是代表色调，饱和度，亮度三个通道的颜色.
h:Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色.
s:Saturation(饱和度)。取值为0%到100%之间的值；
e:Lightness(亮度)。取值为0%到100%之间的值；
最后的a代表透明度。与rgba的a一样的取值。