对父元素透明，但对其他元素不透明

Question

有什么方法可以制作半透明的重叠元素，从中只能看到更高的 z-index 吗？我希望图像对背景透明，但对其他图片不透明。 Here 是 fiddle。

body {
   background: white;
}

section {
    height: 400px;
    position: relative;
    perspective: 500px;
}

img {
    height: 300px;
    left: 50%;
    margin: -100px;
    position: absolute;
    top: 40%;
    transform: rotateY(-30deg);
    width: 200px;
}

img:nth-child(1) {
  left: 30%;
  opacity: 0.8;
  z-index: 3;
}

img:nth-child(2) {
  left: 45%;
  opacity: 0.4;
  z-index: 2;
}

img:nth-child(3) {
  left: 60%;
  opacity: 0.2;
  z-index: 1;
}

<section>
<img src="https://media4.s-nbcnews.com/j/newscms/2016_36/1685951/ss-160826-twip-05_8cf6d4cb83758449fd400c7c3d71aa1f.nbcnews-ux-2880-1000.jpg">
<img src="http://toprozdily.cz/wp-content/uploads/2015/04/slon-africky.jpg">
<img src="http://img.huffingtonpost.com/asset/,scalefit_950_800_noupscale/55fc14631c00004800082775.jpeg">
</section>

Answer 1

没有办法使一个元素对一个元素透明但对另一个元素不透明。

但是，您可以通过为图像着色来模拟透明度，方法是在每个图像上放置该颜色的部分透明 div，或者使用 CSS 滤镜： https://www.w3schools.com/cssref/css3_pr_filter.asp

Answer 2

因此，您需要做的是将每个图像放入各自的 div 容器中，并将 div 背景颜色设置为白色。这样您就可以通过半透明图像看到白色背景，而不是下面的图像。

我编辑了您的 fiddle 以提供您正在寻找的功能。希望对您有所帮助！

对父元素透明，但对其他元素不透明

Transparency towards parent, but not towards another elements

css

z-index

opacity