2017-05-01 6 views
2

より高い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>

enter image description here

+0

ここで、代わりにどのように表示されるべきかを示す画像を投稿してください – LGSon

+0

Btw、これは役立つかもしれませんhttps://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode ... https://css-tricks.com/almanac/properties/m/mix-blend-mode/ – LGSon

答えて

1

をだから何あなた」もう一度やり直す必要があるのは、画像をそれぞれ自分のdivコンテナに入れて、divの背景色を白に設定することです。そうすることで、白い背景が半透明の画像で表示され、下の画像では表示されません。

fiddleを編集して、お探しの機能を追加しました。それが役に立てば幸い!

+0

バックグラウンドが1色であれば動作しますが、それでも十分です。ありがとうございました! – Vesmy

0

要素は一つの要素に透明なく、他に不透明で作成する方法はありません。

しかし、あなたは、どちらかの各画像の上にその色の部分的に透明のdivを配置することによって、またはCSSフィルタと代わりに画像を着色することにより、透明性をシミュレートすることができるかもしれない: https://www.w3schools.com/cssref/css3_pr_filter.asp

関連する問題