如何为网页背景添加模糊、亮度filter效果且不影响文本

要实现背景添加模糊、亮度调整等滤镜效果，同时让内部文本完全不受影响，核心是将背景与文本分层处理——用伪元素单独承载背景并添加滤镜，文本则放在独立层级上。

修改后的CSS代码 #

.main {
  display: flex;
  justify-content: center;
  /* 移除此处filter，避免影响所有子元素 */
}

.container {
  display: flex;
  justify-content: center;
  align-items: center; /* 新增：让文本垂直居中 */
  width: 600px;
  height: 400px;
  position: relative; /* 设置为定位容器，供伪元素参照 */
}

/* 用伪元素创建独立背景层 */
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/people1.jpg);
  background-size: cover; /* 确保背景图铺满容器 */
  background-position: center; /* 居中显示背景图 */
  filter: blur(2px) brightness(0.8); /* 按需添加滤镜效果 */
  z-index: -1; /* 将背景层置于文本下方 */
}

.item {
  color: red;
  font-size: 50px;
  position: relative; /* 确保文本层级高于背景伪元素 */
  z-index: 1;
}

关键改动说明 #

• 移除.main上的filter属性，避免滤镜作用于所有子元素
• 给.container设置position: relative，作为伪元素的定位参照
• 用::before伪元素单独承载背景图，所有滤镜效果仅作用于该伪元素
• 通过z-index控制层级，让文本始终显示在背景层上方

这样处理后，背景会应用你需要的模糊、亮度调整等效果，内部文本则完全不受滤镜影响，保持原本样式。

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