开发者学堂课程【CSS 快速掌握:透明度】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/611/detail/9212
透明度
内容介绍
一、透明度
一、透明度
CSS 透明度
只要是颜色,都可以用透明度
Rgba(红色,绿色,蓝色,透明度)
a:表示透明度的意思 透明度取值:0~1之间 0表示完全透明 1表示不透明
·背景颜色透明
Background-color:rgba(255,255,255,0.3)
·文件颜色透明
Coler:rgba(255,255,255,0.3)
·边框颜色透明
Border:1px soild rgba(255,255,255,0.5)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>
背景颜色透明度</title>
<style type=”text/css”>ground
{
Margin:0;
Padding:0;
}
.boxx{
Width:100px;
Height:100px;
Background:rgb(255,0,0,0.5);
Position:fixed;
}
</style>
</head>
<body>
<div class=”bos”></div>
</body>
</html>
例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
文本颜色设置透明度</title>
<style type="text/css">
.box{
width:100px;
height:100px;
color:rgba(255,0,0,0.3);
border:10px solid rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="box">
文本颜色设置透明度</div>