极客观点
项目管理
HarmonyOS
有两个透明底(background-color: transparent)的div，我想让其中一个div的内容遮住另一个，用纯css能做到吗
问题：
想要类似的效果：
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper {
width: 400px;
height: 400px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid black;
background: url(https://pc-index-skin.cdn.bcebos.com/hiphoto/57009887230.jpg?x-bce-process=image/crop,x_0,y_0,w_1800,h_1125);
}
.wrapper > * {
position: absolute;
color: blue;
background-color: transparent;
border: 1px solid black;
}
.above {
top: 180px;
left: 100px;
z-index: 2;
}
.below {
top: 200px;
right: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="above">我在上面我在上面我在上面我在上面我在上面我在上面我在上面我在上面我在上面我在上面</div>
<div class="below">我在下面我在下面我在下面我在下面我在下面我在下面我在下面我在下面我在下面我在下面</div>
</div>
</body>
</html>
你在above也设置一个和背景图一样的图片，然后利用background-position, 只显示和底部背景图那块重合的区域，就完成效果了。看上去透明的，实际是覆盖的。