より高いz-インデックスのみが表示されるように、半透明の重複要素を作成する方法はありますか?画像を背景に透明にしたいが、他の画像には透明ではない。 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>
ここで、代わりにどのように表示されるべきかを示す画像を投稿してください – LGSon
Btw、これは役立つかもしれませんhttps://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode ... https://css-tricks.com/almanac/properties/m/mix-blend-mode/ – LGSon