CSS改变图片颜色的三种方法

在CSS中，可以通过以下三种方法来改变图片的颜色：

使用CSS滤镜（filter）属性：




img {
  filter: sepia() hue-rotate(90deg) saturate(3);
}

使用CSS混合模式（blend mode）：




img {
  mix-blend-mode: multiply;
}

使用CSS伪元素和线性渐变背景：




img {
  position: relative;
  display: inline-block;
}
 
img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, red, blue);
  mix-blend-mode: multiply;
}

每种方法都有各自的用途，第一种方法通过CSS的滤镜功能可以实现类似老照片的效果，第二种方法可以使图片与其他元素混合显示，第三种方法可以创建出炫丽的颜色渐变效果。

CSS改变图片颜色的三种方法

评论已关闭

推荐阅读