我明白你的困扰——想给背景图加暗化效果，同时让文字保持明亮，但父元素的滤镜会把文字也一起变暗，哪怕子元素加了反向滤镜也会有叠加问题。咱们来一步步解决这个问题：

核心问题分析 #

你当前的代码里，.banner的filter: brightness(0.6)会作用于整个容器及其所有子元素，包括文字。就算子元素加了filter: brightness(1.75)，实际效果是0.6 * 1.75 = 1.05，虽然接近正常，但这种叠加方式不够稳定，而且你已经用了linear-gradient(rgba(0,0,0,0.5))来暗化背景，再叠加滤镜属于重复操作，反而让背景暗度过高。

方案一：移除父元素滤镜，调整渐变透明度（最简单高效） #

既然渐变已经能实现背景暗化，我们可以直接去掉父元素的filter，然后调整渐变的黑色透明度，达到你想要的暗度。这样文字完全不受滤镜影响，直接显示亮色：

修改后的CSS：

.banner {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/page/Front.jpg");
  /* 移除filter: brightness(0.6) */
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.banner-text {
  padding: 200px 0 150px 0;
  /* 移除子元素的filter */
}

.banner-heading {
  font-family: "Lobster", cursive;
  font-size: 75px;
  font-weight: 700;
  line-height: 100px;
  margin-bottom: 30px;
  color: #fff;
  /* 移除子元素的filter */
}

你可以根据需要调整rgba(0,0,0,0.7)里的最后一个数值（0到1之间），数值越大背景越暗。

方案二：用伪元素承载背景和滤镜（适合必须用滤镜的场景） #

如果你确实需要用filter来调整背景（比如除了brightness还要加其他滤镜，比如blur），可以把背景和滤镜放到.banner的伪元素上，这样伪元素只作用于背景，文字不受影响：

修改后的CSS：

.banner {
  position: relative; /* 让伪元素相对于它定位 */
  text-align: center;
  color: #fff;
}

/* 用伪元素承载背景和滤镜 */
.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/page/Front.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  filter: brightness(0.6);
  z-index: -1; /* 把伪元素放到文字下面 */
}

.banner-text {
  padding: 200px 0 150px 0;
  position: relative; /* 确保文字在伪元素上方 */
  z-index: 1;
}

.banner-heading {
  font-family: "Lobster", cursive;
  font-size: 75px;
  font-weight: 700;
  line-height: 100px;
  margin-bottom: 30px;
  color: #fff;
}

这种方法把背景和文字完全分层，滤镜只会作用在伪元素的背景图上，文字始终保持原始亮度。

两种方案都能完美实现“深色背景+亮色文字”的需求，你可以根据实际场景选择。如果只是简单的暗化背景，方案一足够；如果需要复杂的滤镜效果，方案二更灵活。

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