如何用CSS实现图片黑白化?

5 min read

您可以使用CSS的filter属性和grayscale()函数来实现将图片转换成黑白的效果。

HTML:

<img src="example-image.jpg" class="grayscale-image">

CSS:

.grayscale-image {
  filter: grayscale(100%);
}

以上代码将使图片完全变成黑白,如果将grayscale()函数中的值设置为0%则不会有任何变化,设置为100%就会完全变为黑白,也可以在中间调整数值来控制黑白的程度。