CSS混合模式滤色：如何不依赖父级背景色实现图片底色滤镜？

在CSS中，混合模式（Blend Mode）可以用来实现各种视觉效果，包括滤色效果。如果你想要在不依赖父级背景色的情况下实现图片底色滤镜，可以使用 mix-blend-mode 属性。

实现步骤

1. 使用 mix-blend-mode 属性： mix-blend-mode 属性可以设置元素的内容如何与父元素的内容和背景混合。对于滤色效果，你可以使用 screen 或 lighten 混合模式。

2. 创建一个覆盖层： 你可以创建一个覆盖层（例如一个 div 元素），并将其放置在图片的上方。然后对这个覆盖层应用 mix-blend-mode 属性。

3. 设置覆盖层的背景色： 你可以通过设置覆盖层的背景色来实现滤色效果。这个背景色将作为滤镜的颜色。

示例代码

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <div class="overlay"></div>
</div>

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* 红色滤镜，透明度为50% */
  mix-blend-mode: screen; /* 使用screen混合模式 */
}

解释

• .image-container：这是一个包含图片和覆盖层的容器，使用 position: relative 来确保覆盖层可以相对于容器定位。
• img：这是你要应用滤镜的图片。
• .overlay：这是一个覆盖层，使用 position: absolute 将其放置在图片的上方。background-color 设置了滤镜的颜色和透明度，mix-blend-mode: screen 设置了混合模式为 screen，这将使覆盖层的颜色与图片的颜色混合，产生滤色效果。

其他混合模式

你可以尝试不同的混合模式来达到不同的效果：

• multiply：使图片变暗。
• overlay：结合 multiply 和 screen 的效果。
• lighten：取图片和覆盖层中较亮的颜色。
• darken：取图片和覆盖层中较暗的颜色。

通过调整覆盖层的背景色和混合模式，你可以实现各种不同的滤色效果，而不依赖于父级的背景色。