[分享]css3改变图片色调

CSS3是现代网页设计中常用的一种技术，它可以帮助我们实现很多想象中的效果。这里就介绍一下如何使用CSS3改变图片的色调。img { filter: grayscale(100); } 通过CSS3的...

CSS3是现代网页设计中常用的一种技术，它可以帮助我们实现很多想象中的效果。这里就介绍一下如何使用CSS3改变图片的色调。

img {
  filter: grayscale(100%);
} 

通过CSS3的filter属性，我们可以使用grayscale函数将图片变成黑白的。grayscale函数有一个参数，取值范围为0~100，100表示完全灰色，0表示原图色彩不变。

img {
  filter: sepia(100%);
} 

使用sepia函数可以将图片变成复古的棕色调。sepia函数也有一个参数，取值范围同样为0~100。

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

使用hue-rotate函数可以改变图片的色调，这里的参数是旋转的角度，单位为deg。90度表示将图片的色调旋转90度，即成为相对于原来的颜色的反色。

总的来说，CSS3的filter属性可以帮助我们实现很多想象中的效果，比如还有blur函数可以实现模糊效果，opacity函数可以调整透明度等等。