半透明的云彩重叠后颜色变深了
来源：2-14 项目作业
桃机智
2019-06-02 18:40:33
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>work4</title>
<link rel="stylesheet" href="work4.css">
</head>
<body>
<div class="sky">
<div class="cloud one"></div>
<div class="cloud two"></div>
<div class="cloud three"></div>
<div class="cloud four"></div>
<div class="cloud five"></div>
</div>
<div class="grass">
<div class="rabbit"></div>
</div>
</body>
</html>
css样式：
*{
padding: 0px;
margin: 0px;
}
html{
height: 100%;
}
body{
height: 100%;
width: 100%;
}
.sky{
height: 60%;
width: 100%;
background: -webkit-linear-gradient(rgb(196,228,253),rgb(255,255,255));
}
.grass{
height: 40%;
width: 100%;
background: -webkit-linear-gradient(rgb(255,255,255),rgb(148,190,89));
}
.cloud{
height: 80px;
width: 80px;
border-radius: 50%;
background: white;
position: absolute;
top: 100px;
left: 200px;
z-index: 3;
}
.cloud:before{
content:" ";
height: 50px;
width: 150px;
background: inherit;
border-radius: 70px/50px 50px 50px 50px;
position: absolute;
top: 25px;
left: -50px;
z-index: 2;
}
.cloud:after{
content:" ";
height: 60px;
width: 70px;
background: inherit;
border-radius: 50%;
transform: rotate(45deg);
position: absolute;
top: 17px;
left: -35px;
z-index: 1;
}
.sky>.one{
transform: scale(1.2) translateX(200px);
}
.sky>.two{
transform: scale(0.8) translateY(100px);
background: rgba(255,255,255,0.7);
}
写到这里之后，设置了云朵2的透明度为0.7，发现云朵本体和：before，：after部分重叠后，重叠部分的颜色变深了，可以明显看出三个椭圆的形状，但是示例动画中云朵的颜色却很均匀，请问老师这个是怎么回事呢
1回答
-
同学你好， 因为rgba()只会让背景色透明， 所以重叠后会导致重叠部分的颜色变深， opacity可以让元素内容以及背景都透明， 所以可以通过opacity属性实现透明效果，让重叠后的云朵颜色一致。
同学可以自己下去测试一下效果哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
1
相似问题