html - 背景图像移动的CSS视差滚动

标签 html css parallax

<分区>

这是我的视差滚动当前的样子:

w3schools.com

我有这个:

background-image:url("http://google.com");
background-attachment: fixed;

我想要这个,但我不想使用“具体化 css”的东西:materializecss.com

当您向上或向下滚动页面时,background-image 会稍微移动。

最佳答案

要获得这种视差效果,必须将背景图像放置在不同的元素上。这些元素还需要定义 background-attachment: fixed。通过定义背景附件,可以更改任何背景图像的行为和定位。

关于html - 背景图像移动的CSS视差滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40724293/

相关文章:

html - 向左浮动导致 div 获得 'margin'

javascript - 如何根据图像中显示的百分比进行星级评定?

html - 为什么视差不能使用 html css

html - 用透明度隐藏部分形状?

javascript - 带有关闭选项的粘性框

html - 帮助解决 css 定位问题。我的工具栏不能放在它下面的 div 上

jquery - imgAreaSelect 不隐藏在模式关闭时,或随页面滚动

css - 如何更改 c3.js 中列之间的间距?

javascript - Vanilla JS 视差卡顿

CSS多个固定背景伪元素