您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css3的颜色模式
发布时间：2015-06-17 19:27:23编辑：雪饮阅读（）
色轮模式（hsl）
<!doctype html>
<html>
<head>
<style>
body{background:HSL(0,100%,50%)}
/*
色轮的三个参数：
H：0-360（为了区别不同的颜色）
S:饱和度，同一个区域一个颜色的像素点的密集程度
L：亮度，从最内到最外圈逐渐递增
*/
</style>
</head>
<body>
</body>
</html>
浏览效果就是整个网页全部是红色
增加透明度的色轮模式（hsla）
<!doctype html>
<html>
<head>
<style>
body{background:HSL(0,100%,50%)}
div{width:300px;
height:300px;
background:HSLA(230,100%,50%,0.2);
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
猜猜雪饮个人博客在哪里
<div></div>
</body>
</html>
预览图：
rgba（rgb的增强版，支持透明参数）
<!doctype html>
<html>
<head>
<style>
body{background:rgba(255,0,0,1)}
div{width:300px;
height:300px;
background:rgba(0,0,255,0.2);
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
猜猜雪饮个人博客在哪里
<div></div>
</body>
</html>
浏览效果和上面的色轮模式的透明效果一致
Opacity（使元素透明）
<!doctype html>
<html>
<head>
<style>
body{background:red}
div{background:blue;
width:300px;
height:300px;
opacity:0.3;
position:absolute;
top:0;
left:0
}
/*opacity设定元素的透明度*/
</style>
</head>
<body>
看到雪饮个人博客你就成功了
<div></div>
</body>
</html>
预览图：
关键字词：css3,颜色,个人博客