CSS里设置透明度的两种方法
1.RGBA
语法如下:
rgba(R,G,B,A);
rgba是Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)四个单词的缩写。
R:红色值,取值为:[0~255]
G:绿色值,取值为:[0~255]
B:蓝色值,取值为:[0~255]
A:透明度,取值为:[0~1]
rgba()只是单纯的可以设置颜色透明度,但上面的文字不透明,即透明度元素的子元素不会继承其透明效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rgba</title>
<style type="text/css">
#Box{
width:100px;
height:100px;
}
.box1{
background:rgba(255,255,0,1);
}
.box2{
background: rgba(255,255,0,0.3);
}
</style>
</head>
<body>
<div id="Box">
<div class="box1">这是一个样例这是一个样例这是一个样例</div>
</div>
<br/>
<div id="Box">
<div class="box2">这是一个样例这是一个样例这是一个样例</div>
</div>
</body>
</html>
如下图:两个盒子的文字都不会变透明。
2.opacity属性设置背景透明度
opacity语法:
opacity:value;
其中,value的取值为[0~1]。
opacity属性具有继承性,会使容器中的所有元素都具有透明度,因此字体也会透明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>opacity</title>
<style type="text/css">
#Box{
width:100px;
height:100px;
background:#2DC4CB;
}
.box1{
opacity:1;
}
.box2{
opacity:0.3;
}
</style>
</head>
<body>
<div id="Box">
<div class="box1">这是一个样例这是一个样例这是一个样例</div>
</div>
<br/>
<div id="Box">
<div class="box2">这是一个样例这是一个样例这是一个样例</div>
</div>
</body>
</html>
如下图:第二个盒子中的文字也变透明了