- 使用 opacity属性，参数从0到1.0，完全透明是 0.0，完全不透明是 1.0，参数越小越透明，举个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
.test {
background-color: red;
opacity: 0.2;
width: 300px;
height: 150px;
}
</style>
<body>
<div class="test">颜色透明度</div>
</body>
</html>
但是这样的写法会使得其中的文字也变得透明：
2. 使用rgba方式， 推荐十六进制颜色转rgba在线工具，获取到前三位数据之后，第四位就是透明度了，和上述opacity原理类似，但是不会改变其中的文字透明度：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
.test {
background-color: rgba(255,0,0,0.2);
width: 300px;
height: 150px;
}
</style>
<body>
<div class="test">颜色透明度</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
