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

亚历山大·格奥尔基耶夫

如果它在固定 DIV 之外,我在使我的“窗帘”div 透明时遇到问题。在下面的示例中,我想实现视差窗帘 DIV 的透明度,而不必将其放置在视差 DIV 内。

https://jsfiddle.net/0kfapw35/

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

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

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

不幸的是,这对我不起作用。那可能吗?

提前致谢!

Florea Ionut Micu

您的示例中的问题是,如果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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章