使用 CSS 的视差滚动效果。

视差
视差是一种用于各种网站的 3d 效果，以使网页更具吸引力。在这种效果中，当我们滚动时，网页背景的移动速度与前景的移动速度不同，这使得它看起来很棒。

例子：
这些网站出色地展示了视差效果——

• 看火游戏
• 花园工作室
• alquimiawrg

这种效果是一种很好的视觉效果，但在 CSS 的帮助下很容易实现。
首先，让我们了解给定示例中发生了什么。
创建效果是因为背景中的图像保持固定不动，但其他图像在移动。这种简单的技术使这种效果看起来很棒。
现在让我们看看使用 CSS 实现这个效果 -
解释
1. 背景附件
此属性用于确定背景图像是固定的还是随页面滚动的。

Syntax : background-attachment: scroll/fixed/local;

2. 背景位置
此属性确定背景图像的起始位置。

Syntax : background-position: value;

3. 背景重复
此属性确定背景图像是否重复，如果重复，将如何重复。

Syntax : background-repeat: repeat/repeat-x/repeat-y/no-repeat;

重复 - 背景图像将在垂直和水平方向重复。
repeat-x – 背景图像将仅水平重复。
repeat-y - 背景图像将仅垂直重复。
no-repeat – 背景图像不会重复。
4. 背景尺寸
此属性确定背景图像的大小。

Syntax : background-size: auto/length/cover/contain/;

自动 - 默认值。
length – 设置背景图像的宽度和高度。
百分比 - 以容器元素的百分比设置背景图像的宽度和高度。
cover - 将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。
包含 - 将图像缩放到最大尺寸，使其宽度和高度都可以容纳在内容区域内。

This is a Parallax


Hi

输出：

请注意，这种视差效果并不总是适用于手机和平板电脑，因此您需要使用媒体查询关闭该效果。