通过伪元素 `::before` 单独为背景图应用 `filter: grayscale()`，可精准控制灰度仅作用于图像，完全避免影响标题、按钮等前景内容。

在网页开发中，常需对背景图像应用视觉滤镜（如灰度），但直接在容器上设置 filter: grayscale() 会导致其所有子元素（包括文字、按钮等）一同变灰，违背设计初衷。解决这一问题的核心思路是：将背景图像与内容结构分离——即不再使用 background-image 直接设置在内容容器上，而是借助伪元素 ::before 创建一个独立的、位于底层的“图像层”，并仅对该层应用灰度滤镜。

以下是推荐实现方案：

✅ HTML 结构保持不变（无需修改）：

   
  
    
      
Check out our Store
    
    Shop
  

✅ CSS 关键改造（重点在于解耦背景与内容）：

.top {
  position: relative; /* 为伪元素提供定位上下文 */
  padding-bottom: 500px;
  padding-top: 50px;
  border-bottom: 10px solid #333;
  /* 移除 background-image 和 filter，交由 ::before 处理 */
}

.top::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('../Images/46162.webp');
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%); /* ✅ 灰度仅作用于此伪元素 */
  z-index: -1; /* 确保置于所有子内容下方 */
}

/* 内容区域保持纯净，不受任何 filter 影响 */
.titleMain {
  margin-left: 5%;
  margin-right: 70%;
  margin-top: 5%;
  padding-bottom: 40px;
  font-size: xx-large;
  /* 不再需要 filter: none —— 本就未继承 */
}

⚠️ 注意事项：

• 必须为 .top 设置 position: relative，否则 ::before 的 absolute 定位将相对于文档根或最近定位祖先，导致错位；
• z-index: -1 是关键，确保伪元素作为背景层不遮挡文字和链接；若页面有其他绝对定位元素，需统一管理层级；
• 若需响应式适配，建议配合 background-attachment: fixed 或媒体查询微调 background-size，但 filter 本身完全支持响应式；
• 兼容性良好：现代浏览器（Chrome 18+、Firefox 35+、Safari 6.1+、Edge 13+）均支持伪元素 + filter 组合。

? 延伸提示：该模式同样适用于 blur()、brightness()、contrast() 等其他 CSS 滤镜——只需将 grayscale(100%) 替换为对应函数，即可实现背景特效与前景内容的完全解耦。