如何降低Header背景图片亮度且不影响内容亮度？

嘿，这个需求很常见，我来给你说个简单靠谱的办法——利用CSS伪元素来单独控制背景图的亮度，这样header里的文字、按钮这些内容完全不受影响。

核心思路 #

我们需要给header添加一个伪元素（比如::before），把背景图放到这个伪元素上，然后给伪元素加上亮度调节样式，同时让header的内容层级高于这个伪元素，这样内容就不会被背景的亮度变化影响。

修改后的完整CSS代码 #

header {
  position: relative; /* 关键：让伪元素能相对于header定位 */
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  text-align: center;
  color: #fff;
  z-index: 1; /* 确保内容在伪元素之上 */
}

/* 新增伪元素作为独立背景层 */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(assets/bg.jpg); /* 将背景图移至伪元素 */
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  filter: brightness(0.7); /* 调节背景亮度，数值越小越暗（0-1之间） */
  /* 可选：用半透明黑色叠加替代filter，效果更柔和：
  background-color: rgba(0, 0, 0, 0.3);
  background-blend-mode: darken;
  */
  z-index: -1; /* 让伪元素处于内容下方 */
}

header .intro-text {
  padding-top: 100px;
  padding-bottom: 50px;
  position: relative; /* 双重保障内容层级 */
}

header .intro-text .intro-lead-in {
  font-family: "Playfair Display",sans-serif;
  font-style: italic;
  font-size: 22px;
  line-height: 22px;
  margin-bottom: 25px;
}

关键步骤说明 #

• position: relative给header：让伪元素的绝对定位范围限定在header内部，不会超出。
• 伪元素承载背景图：把原来header的背景图移到伪元素上，这样背景和内容就分离成两个独立层级。
• 亮度调节：用filter: brightness()可以直接调整背景图亮度，数值你可以根据需求修改；如果想要更自然的暗化效果，也可以用rgba黑色叠加的方式（注释里的代码）。
• 层级控制：伪元素的z-index: -1和header的z-index: 1确保内容始终在背景之上，不会被遮挡或影响。

HTML代码无需修改 #

你的HTML结构完全没问题，保持原样即可：

<header>
 <div class="container">
 <div class="slider-container">
 <div class="intro-text">
 <div class="intro-lead-in">Welcome To Our Studio!</div>
 <div class="intro-heading">It's Nice To Meet You</div>
 <a href="#about" class="page-scroll btn btn-xl">Tell Me More</a>
 </div>
 </div>
 </div>
</header>

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