我一生都无法弄清楚为什么较高的 z-index 元素在重叠的地方是透明的。有什么想法我在这里做错了吗？
.container {
position: relative;
width: 700px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.img1 {
background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
background-size: cover;
width: 300px;
height: 200px;
top: 50px;
position: absolute;
z-index: 3;
opacity: 0.3;
}
.img2 {
background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
background-size: cover;
width: 300px;
height: 200px;
top: 150px: left: 200px;
position: absolute;
z-index: 1;
opacity: 0.3;
}<div class="container">
<div class="img1">
</div>
<div class="img2">
</div>
</div>