视差滚动实现问题：background-attachment失效，能否用background-color替代？

Great question! Let's break this down clearly for you:

首先直接回应核心问题：你不能直接用background-color配合background-attachment: fixed实现视差效果——因为background-attachment属性仅对背景图像生效，对纯色背景没有作用。不过别担心，我们有简单的替代方案来实现你想要的固定纯色背景视差效果。

为什么原方法行不通？ #

你的原代码里用background-image配合background-attachment: fixed实现背景固定，但换成background-color后，background-attachment就失去了作用——这个属性是专门控制背景图像的滚动行为的，纯色背景不受它影响。

解决方案：用固定定位的背景层 #

我们可以创建一个固定在视口的纯色背景层，让页面内容在它上方滚动，这样就能模拟出和background-attachment: fixed一样的视差效果。这里有两种实用的实现方式：

方法1：使用伪元素作为固定背景 #

给body添加一个伪元素，让它铺满整个视口并固定位置，作为你的纯色背景：

@charset "UTF-8";
* { box-sizing: border-box; }
body, html { 
  margin: 0; 
  font-family: sans-serif; 
  height: 100%; 
  /* 确保内容不会被伪元素遮挡 */
  position: relative;
  z-index: 1;
}

/* 固定纯色背景伪元素 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #83b2d9;
  z-index: -1; /* 把背景放在内容下方 */
}

#mainpage { 
  width: 100%; 
  height: 100%; 
  /* 可添加首屏内容样式，比如文字居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
}

#subpage {
  padding: 2rem;
  background-color: #fff; /* 避免和背景色重叠 */
}

方法2：固定首屏容器 #

如果你的#mainpage是占满整个视口的首屏区域，也可以直接把它固定，然后让下方的#subpage在它下方滚动：

@charset "UTF-8";
* { box-sizing: border-box; }
body, html { 
  margin: 0; 
  font-family: sans-serif; 
  height: 100%; 
}

#mainpage { 
  width: 100%; 
  height: 100vh; /* 用vh确保占满视口高度 */
  background-color: #83b2d9;
  position: fixed; /* 固定在视口 */
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
}

#subpage {
  margin-top: 100vh; /* 让subpage从首屏下方开始 */
  padding: 2rem;
  background-color: #fff;
}

修改后的完整HTML代码 #

这里是用方法1实现的完整可运行代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed Solid Background Parallax</title>
<style>
@charset "UTF-8";
* { box-sizing: border-box; }
body, html { 
  margin: 0; 
  font-family: sans-serif; 
  height: 100%; 
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #83b2d9;
  z-index: -1;
}

#mainpage { 
  width: 100%; 
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
}

#subpage {
  padding: 2rem;
  background-color: #fff;
}
</style>
</head>
<body>
<div id="mainpage">
  <h1>首屏内容</h1>
</div>
<div id="subpage">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p>
</div>
</body>
</html>

这两种方法都能完美实现你想要的固定纯色背景视差效果，滚动页面时背景保持不动，内容正常滚动。你可以根据自己的页面结构选择更适合的方式~

内容的提问来源于stack exchange，提问作者ButterIsMelting