如何为body背景图片添加grayscale（灰度）滤镜效果？

问题根源 #

你当前的写法有两个核心问题：

1. 同时使用了HTML的<body background="...">属性和CSS的background-image，造成重复定义，可能导致样式冲突；
2. 直接给body加filter会把页面内所有子元素（文本、表单等）一并应用灰度，这不是你要的效果。

两种有效解决方案 #

方案1：使用伪元素实现独立背景滤镜（推荐）

这种方法可以让背景图单独应用灰度，完全不影响页面内容。

修改步骤：

• 移除HTML中<body>标签的background属性；
• 调整CSS，用body::before伪元素承载背景图和滤镜：

body {
  width: 100%;
  min-height: 100vh; /* 确保body占满整个视口高度 */
  text-align: center;
  font-family: Helvetica;
  color: rgb(255, 255, 255);
  font-size: 30px;
  position: relative; /* 为伪元素定位提供基准 */
  margin: 0; /* 清除默认边距 */
}

/* 用伪元素添加带灰度的背景 */
body::before {
  content: "";
  position: fixed; /* 固定背景，滚动时不移动 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(60%); /* 调整灰度比例 */
  z-index: -1; /* 把背景放在内容下方 */
}

/* 其余原有CSS样式保持不变 */
label[for="email-label"] {
  margin-left: 120px;
  margin-right: 120px;
}
/* ... 剩下的CSS代码省略 */

方案2：用img标签作为背景层

如果你更倾向于用<img>标签，只需调整定位和层级即可让图片在文本下方并生效灰度：

修改后的HTML片段：

<body>
  <!-- 背景图放在最前面，设置z-index让它在内容下方 -->
  <img src="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg" class="bg-image">
  
  <h1 id="title">Favorite Media Survey</h1>
  <!-- 其余内容保持不变 -->
</body>

新增对应CSS：

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并覆盖整个视口 */
  filter: grayscale(60%);
  z-index: -1;
}

/* 同时记得移除body的background-image和filter属性 */

验证效果 #

两种方案都能实现背景图灰度化，同时页面文本、表单等内容保持原有样式，不会被滤镜影响。

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