CSS如何改变背景色透明度?
方法一:
opacity属性,值区间0-1;透明为0,不透明为1,半透明为0.5,以此类推。(缺点,元素透明度会随着透明度改变)
方法二:
rgba属性,rgba(0, 0, 0, x),前三位为颜色值,最后一位x表示透明度(0-1,透明为0,不透明为1,半透明为0.5,以此类推)(此方法不会改变元素透明度)
案例:(注意观察字体透明度)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{height: 50px;width: 100px;background: red;opacity: 0.5;}
#box2{height: 50px;width: 100px;background:rgba(255, 0, 0, 0.5)}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<p></p>
<div id="box2">盒子二</div>
</body>
</html>