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

Question

有没有办法制作半透明的重叠元素，从中只能看到更高的 z-index？我希望图像对背景透明，但对其他图片不透明。 Here 是小提琴。

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 容器中，并将div 背景色设置为白色。这样您就可以通过半透明图像而不是下面的图像看到白色背景。

我编辑了您的fiddle，为您提供所需的功能。希望对您有所帮助！

Answer 2

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

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