對父項的透明度，但不是針對其他元素

是否有任何方法可以製作半透明重疊元素，從中只能看到更高的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>

來源

2017-05-01 Vesmy

現在我們知道在哪裏，發佈圖片顯示它應該看起來像 – LGSon

順便說一句，這可能會有所幫助https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode ... https://css-tricks.com/almanac/properties/m/mix-blend-mode/ – LGSon

所以你」需要做的是將圖像各自放在它們自己的div容器中，並將div背景顏色設置爲白色。這樣你就可以通過半透明圖像看到白色背景，而不是下面的圖像。

我編輯了您的fiddle，爲您提供了您正在尋找的功能。希望能幫助到你！

來源

2017-05-01 22:04:30

雖然它只適用於背景有一種顏色，但它對我來說已經足夠了。謝謝！ – Vesmy

沒有一種方法，使一個元件是透明的一種元素，但不透明到另一個。

但是，您可能能夠通過着色的圖片來替代模擬透明度，無論是在每個圖像定位該顏色的部分透明的股利，或用CSS濾鏡： https://www.w3schools.com/cssref/css3_pr_filter.asp

來源

2017-05-01 21:47:10

對父項的透明度，但不是針對其他元素

回答

相關問題