<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.norgba-border-color {
width: 200px;
height:50px;
background:#333;
opacity:0.5;
}
.rgba-border-color {
width: 200px;
height:50px;
margin-top:-10px;
background:#666;
opacity:0.5;
}
</style>
<body>
<div class="norgba-border-color"></div>
<div class="rgba-border-color"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.norgba-border-color {
width: 200px;
height:50px;
background:#333;
opacity:0.5;
}
.rgba-border-color {
width: 200px;
height:50px;
margin-top:-10px;
background:#666;
opacity:0.5;
}
</style>
<body>
<div class="norgba-border-color"></div>
<div class="rgba-border-color"></div>
</body>
</html>
你运行看看，希望能帮到你。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2019-05-25
使用透明背景色就可以实现了
两个区域分别使用透明背景色，他们重叠的区域就会变成颜色叠加效果
background-color:rgba(233,242,208, .5)
颜色是我随意填写的，最后的.5是透明度，其实是0.5，省略了0
透明度是从0-1取值的，0是完全透明，1是不透明
快去试试吧
两个区域分别使用透明背景色，他们重叠的区域就会变成颜色叠加效果
background-color:rgba(233,242,208, .5)
颜色是我随意填写的，最后的.5是透明度，其实是0.5，省略了0
透明度是从0-1取值的，0是完全透明，1是不透明
快去试试吧
相似回答