代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>半透明背景示例</title>
<style type="text/css">
#content {
background:rgba(0, 0, 0, 0.3);
width:100px;
height:100px;
}
#background {
background:red;
width:150px;
height:150px;
}
#test {
background:rgba(0, 0, 0, 0.3);
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="background">
<div id="content"></div>
</div>
<div id="test"></div>
</body>
</html>
浏览器中显示如下图:
关于rgba()
- r表示红色 ,g表示绿色,b表示蓝色, a是透明度
- a的值在0-1之间,1表示不透明,0表示全透明。
- rgb的值用十进制表示
element { color: rgba(255, 0, 0, 0.5) }