How do you implement a CSS-only parallax scrolling effect?

在实现仅使用CSS的视差滚动效果时，我们主要依赖于CSS的属性来调整背景图片的滚动速度，使其与页面滚动的速度不同，从而产生一种视差的效果。这里有一个基本的实现方法：

1. HTML 结构: 首先，我们需要设置好HTML结构。通常，我们会有多个分区（section），每个分区可以包含一个具有视差效果的背景。

html
<div class="parallax-section">
    <h1>视差效果区域 1</h1>
</div>
<div class="content-section">
    <p>这里是正常内容区域。</p>
</div>
<div class="parallax-section">
    <h1>视差效果区域 2</h1>
</div>

1. CSS 样式: 接下来，我们需要通过CSS来设置这些视差效果。主要通过background-attachment属性来固定背景图片，使其不随滚动条滚动。

css
.parallax-section {
    height: 300px;
    background-image: url('background-image-url.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

通过设置 background-attachment: fixed;，背景图片就不会随着页面的滚动而移动，这与其他内容相比，就形成了一种视差效果。

1. 优化和兼容性: 虽然这种方法简单，但存在一些兼容性问题，特别是在移动端设备上。iOS 的Safari浏览器在处理 background-attachment: fixed; 时可能会有性能问题。为了更好的兼容性和性能，我们可以考虑使用 JavaScript 或者 CSS3 的其他特性（如transform）来实现更复杂的视差效果。

2. 使用CSS变量增强视差效果: 通过使用CSS变量和calc()函数，我们可以根据滚动位置动态调整背景位置，从而创建更动态的视差效果。

css
:root {
    --scroll-var: 0px;
}

.parallax-section {
    height: 300px;
    background: url('background-image-url.jpg') center / cover no-repeat fixed;
    background-position: center calc(50% + var(--scroll-var));
}

body {
    height: 2000px;
}

body.onscroll = () => {
    document.documentElement.style.setProperty('--scroll-var', `${window.scrollY / 2}px`);
}

以上是使用纯CSS实现基本视差滚动效果的方法，适合简单的使用场景。对于更复杂的视差效果，可能需要结合JavaScript来实现。