对父母的透明度，但不是对另一个元素的透明度

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