如何使用CSS降低背景图片高光区域亮度？

要实现只降低高光亮度、保留阴影和中间调的效果，可以通过伪元素+蒙版混合的方式精准作用于高光区域，核心利用CSS的mask-image和mix-blend-mode属性：

实现代码 #

/* 图片容器 */
.highlight-dimmer {
  position: relative;
  /* 按需设置宽高，或自适应图片尺寸 */
  width: 600px;
  height: auto;
  /* 将图片设为背景图，用<img>标签的话只需调整容器适配逻辑 */
  background-image: url("your-image.png");
  background-size: cover;
  background-position: center;
}

/* 压暗高光的伪元素 */
.highlight-dimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 控制高光压暗强度，透明度值越大，高光越暗 */
  background-color: rgba(0, 0, 0, 0.6);
  /* 混合模式：仅让深色层作用于亮部，暗部不受影响 */
  mix-blend-mode: multiply;
  /* 用原图作为蒙版，基于亮度分布控制伪元素显示范围 */
  mask-image: url("your-image.png");
  mask-mode: luminance;
}

代码说明 #

• mask-image: url("your-image.png")：以原图作为蒙版，让伪元素的显示范围完全匹配原图的亮度分布。
• mask-mode: luminance：蒙版透明度由原图亮度决定——原图越亮的区域，蒙版越不透明（伪元素的深色层会覆盖）；原图越暗的区域，蒙版越透明（伪元素隐藏，保留原图阴影）。
• mix-blend-mode: multiply：深色层与原图亮部像素相乘，自然压暗高光，同时不会改变暗部的颜色和亮度，避免整体调暗。
• rgba(0,0,0,0.6)：调整最后一个透明度值可控制高光压暗的强度，按需修改即可。

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