Question

我试图将半透明图像向上滚动以显示其下方的另一张图像。

到目前为止，我已经将顶部图像向上滚动并且下面是固定图像，但我无法弄清楚如何让顶部图像的透明部分显示下面的固定图像。 / p>

我确保顶部图像是透明的，并通过将顶部幻灯片背景颜色设置为红色进行测试，这样可以正常工作，但将其设置为透明仍显示为白色。

在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;
}

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

Tranparent fiddle如果您需要白色背景fiddle

如何使滚动DIV背景透明？

1 个答案: