Transparence vis-à-vis du parent, mais pas vers d'autres éléments

Question

Existe-t-il un moyen de créer des éléments chevauchants semi-transparents, à partir desquels seul un index z plus élevé sera visible? Je voudrais que les images soient transparentes à l'arrière-plan, mais pas aux autres images. Here est violon.

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

Alors ce que vous » Nous allons devoir placer les images dans leur propre conteneur div et définir la couleur de fond div sur blanc. De cette façon, vous voyez le fond blanc à travers les images semi-opaques et non l'image en dessous. J'ai édité votre fiddle pour vous offrir les fonctionnalités que vous recherchez. J'espère que cela aide!

Answer 2

Il n'y a pas moyen de faire un élément transparent à être un élément mais opaque à l'autre.

Cependant, vous pourriez être en mesure de simuler la transparence en teintant les images à la place, que ce soit en positionnant un div partiellement transparent de cette couleur sur chaque image ou avec des filtres CSS: https://www.w3schools.com/cssref/css3_pr_filter.asp