如何为图片添加带暗调的红色顶部滤镜？HTML/CSS实现咨询

你之前的问题大概率是用了太鲜艳的红色（比如纯红#ff0000）搭配透明度，导致叠加后偏亮，和参考图的暗调红不符。下面给你两种简单可行的实现方案：

方案一：用伪元素做叠加层 #

这种方法兼容性好，参数调整灵活：

<div class="image-container">
  <img src="你的图片路径" alt="示例图片">
</div>

.image-container {
  position: relative;
  /* 可选：限制容器大小，和图片尺寸匹配 */
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 深暗红色+透明度，模拟参考图的暗调效果，可按需调整rgba数值 */
  background-color: rgba(80, 10, 10, 0.6);
}

方案二：用背景混合模式（更简洁） #

直接给容器设置背景图+背景色，通过混合模式让颜色和图片自然融合：

<div class="image-blend"></div>

.image-blend {
  width: 500px;
  height: 300px;
  /* 先写图片路径，再写叠加的暗红色 */
  background: url("你的图片路径") center/cover, rgba(90, 15, 15, 0.5);
  /* multiply混合模式让红色和图片暗部融合，更贴近参考效果 */
  background-blend-mode: multiply;
}

你可以调整rgba里的颜色值和透明度，直到匹配参考图的效果——比如把红色调得更深（降低红通道数值，比如rgba(60, 5, 5, 0.7)），或者调整透明度来控制叠加的深浅。

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