css3新特性@rgba

时间:2022-07-03 18:18:36

1.rgba也经常在实际应用中使用,它主要是在原来rgb的基础上添加了一透明度。但是他又和opacity又有一些差别,主要体现在对子元素的透明度的影响上。

  例如:使用opacity和background属性设置元素的背景色和透明度,其子元素的透明度跟着父元素一起变化。

 <!DOCTYPE html>
<html>
<head>
<title>css3</title>
</head>
<style type="text/css">
.example{
width:100%;
height:500px;
background: yellow;
opacity: 0.1;
color:red;
font-size: 50px;
}
.example2{
background: blue;
width: 200px;
height:300px;
}
.example3{
background: blue;
}
</style>
<body>
<div class="example">
<div class="example2">
111
</div>
</div>
<div class="example3">
background
</div>
</body>
</html>

但是rgba()对子元素的透明度没有影响

 <!DOCTYPE html>
<html>
<head>
<title>css3</title>
</head>
<style type="text/css">
.example{
width:100%;
height:500px;
background: rgba(0,0,0,.1);
color:red;
font-size: 50px;
}
.example2{
background: yellow;
width: 200px;
height:300px;
} </style>
<body>
<div class="example">
<div class="example2">
111
</div>
</div> </body>
</html>

参考:http://www.w3cplus.com/content/css3-rgba