向下滚动页面时,是否有两个HTML背景图像会融合在一起?
基本上我有2张相同的图像,但是一张是在日光下拍摄的,另一张是在夜间拍摄的,我想要在浅色的那张是原始图像的情况下,随着页面向下滚动,它开始融合到较暗的那张图像中?
提前谢谢了。
约旦。
最佳答案
它可能不是很简单,但是可以解决问题。
使用2格,绝对定位为,赋予它们负的z索引和100%的宽度和高度。这将成为网站的背景。如果您希望它从白天运行到夜晚,请给带夜背景的div的z-index小于带白天背景的div的z-index。这样,“日” div位于“夜” div上方,并且完全覆盖了它。
现在,当您向下滚动时,请使用JavaScript逻辑来检查是否已滚动一定数量的像素,并且可以将“ day” div的不透明度降低每100像素左右0.1。
这样,当用户向下滚动1000像素时,“ day” div将完全消失。
关于html - 在HTML/CSS中混合两个背景图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22273972/