如何使滾動的 DIV 背景透明？

Question

我正在嘗試使半透明圖像向上滾動以顯示其下方的另一張圖像。

到目前為止，我已經將頂部圖像向上滾動而固定圖像位於下方，但我無法弄清楚如何讓頂部圖像的透明部分顯示下方的固定圖像。

我確保頂部圖像是透明的，並通過將頂部幻燈片背景顏色設置為紅色來測試它，這工作正常，但將其設置為透明仍然顯示為白色。

在 CSS 中，我已經把這兩個都無濟於事：

background-color: transparent;

background-color: rgba(0, 0, 0, 0);

你能告訴我我做錯了什么或給我一種替代方法來實現這一目標嗎？

謝謝。

https://jsfiddle.net/3vw52ncb/2/

Answer 1

在 jbutler483 的小提琴的幫助下，我做了你想要的。 你需要opacity使圖像透明和position: absolute; 刪除白色背景。

使用以下代碼更改您的 slide1'css：

#slide_1 {
  background-image: url("http://i.imgur.com/TIaK19Z.png");
  background-size: 120%;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;/* To remove white background */
  top: 0;
  opacity:0.8;/* To make the top image transparent */
  left: 0;margin-bottom:100vh;
}

您可以根據需要更改不透明度值。

透明的小提琴，如果你想要，那么用白色背景的小提琴