利用CSS样式给Banner图片增加滤镜效果

老蒋在处理一个客户的网站Banner图片的时候，原图偏亮，希望图片稍微加上不透明的遮罩滤镜效果。我们正常可以将图片直接调整色调即可，但是如果客户以后希望原图那我们还要重新将图片替换有点麻烦，于是就考虑到用CSS给图片增加遮罩效果。

这里有几个方法可以参考。

1、使用伪元素叠加遮罩层

在图片容器上添加半透明遮罩层：

/* Banner 图片遮罩效果 */
.bannertop {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
}

.bannertop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 黑色遮罩，透明度30% */
  z-index: 1;
  pointer-events: none; /* 允许点击穿透 */
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 500px;
  position: relative;
  z-index: 0;
}

/* 确保文字在遮罩之上 */
.bannertop .site-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2; /* 确保在遮罩之上 */
}

2、使用 CSS Filter

直接调整图片的亮度和对比度：

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 500px;
  filter: brightness(0.7) contrast(1.1); /* 降低亮度70%，增强对比度 */
  /* 或者使用 */
  /* filter: brightness(0.6); */ /* 只降低亮度 */
}

3、使用 Linear Gradient 叠加

创建从透明到深色的渐变遮罩：

.bannertop {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
}

.bannertop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 100%
  ); /* 从上到下渐深 */
  z-index: 1;
  pointer-events: none;
}

4、深色遮罩

如果需要更深的遮罩效果：

.bannertop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% 黑色遮罩 */
  z-index: 1;
  pointer-events: none;
}

建议选择第一种方式：

兼容比较好，而且灵活，可调整颜色和透明度，可配合渐变使用。

调整遮罩深度的参数：

rgba(0, 0, 0, 0.2) = 20% 黑色遮罩（轻微）
rgba(0, 0, 0, 0.3) = 30% 黑色遮罩（中等）
rgba(0, 0, 0, 0.4) = 40% 黑色遮罩（较深）
rgba(0, 0, 0, 0.5) = 50% 黑色遮罩（很深）

也可以使用其他颜色，比如：

rgba(55, 92, 158, 0.3) = 品牌色遮罩（#375C9E）
rgba(0, 0, 0, 0.3) = 纯黑遮罩