在图像 CSS 上叠加颜色

在现代 Web 设计中，我们常常需要在图像上叠加一些颜色来达到特定的视觉效果。在本文中，我们将介绍使用 CSS 在图像上叠加颜色的几种方法。

1. background-blend-mode 属性

background-blend-mode 是一个 CSS 属性，它定义了图像的背景颜色如何与其所在元素的背景颜色混合。默认值为 normal。

可以通过设置 background-blend-mode 属性值为 multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color 或 luminosity 来实现不同的叠加效果。

代码示例：

.image {
  background-image: url(/path/to/image.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

2. mask-image 属性

mask-image 是一个 CSS 属性，它可以将图像叠加到元素的背景中。

可以将 mask-image 属性值设置为 linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), url(), clip-path(), 或 none。

代码示例：

.image {
  background-image: url(/path/to/image.jpg);
  background-color: red;
  -webkit-mask-image: linear-gradient(red, yellow);
  mask-image: linear-gradient(red, yellow);
}

3. ::before 伪元素

可以使用 ::before 伪元素创建一个绝对定位的元素，并将其置于元素的顶部。然后，可以将其 background-color 属性设置为所需的颜色，并通过 opacity 属性控制颜色的透明度。

代码示例：

.image {
  position: relative;
}
.image::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.5;
}

结论

本文介绍了三种使用 CSS 在图像上叠加颜色的方法：background-blend-mode 属性、mask-image 属性和 ::before 伪元素。无论你选择哪种方法，都要记住在视觉上达到所需的效果，需要调整叠加颜色的透明度、混合模式和背景颜色。