视差透明滚动效果，“窗帘” div 放置在视差 div 之外

Question

如果我的“幕布”div 在固定的 DIV 之外，我无法使其透明。在下面的示例中，我想实现视差窗帘 DIV 的透明度，而不必将其放置在视差 DIV 内。

https://jsfiddle.net/0kfapw35/

我知道如果 DIV 像这样嵌套可以实现：

<div class="parallax">
  <div class="parallax-curtain">
  </div>
</div>

https://jsfiddle.net/wamosjk/jfxb0kz1/

不幸的是，这对我不起作用。这可能吗？

提前致谢！

Answer 1

您的示例中的问题是，如果parallax-curtain 不是parallax 元素的子元素，那么在他后面只有body 元素，它是白色的。如果您更改body 元素的background-color:red;，您会看到透明度确实应用于parallax-curtain，它在您的示例中不可见，因为它与他后面的元素颜色相同。

您可以将parallax 元素放在parallax-curtain 后面，添加position:sticky; z-index=-1; top:0;：https://jsfiddle.net/x837kwfb/60/