📌  相关文章
📜  如何使用 CSS 将图像的颜色更改为黑白？(1)

📅  最后修改于: 2023-12-03 15:23:50.581000             🧑  作者: Mango

如何使用 CSS 将图像的颜色更改为黑白？

在网页设计中，我们可以使用 CSS 来对图像进行样式修改，包括颜色的更改。本篇文章将介绍如何使用 CSS 将图像的颜色更改为黑白。

使用 CSS 颜色滤镜

CSS 提供了 filter 属性，可以实现对图像的颜色进行过滤，从而实现黑白效果。具体用法如下：

filter: grayscale(100%);

这里的 graysacle 是一种滤镜效果，可以实现将图像颜色转换为灰度图。括号内的参数表示滤镜的强度，范围为 0% 到 100%。100% 表示完全将图像转换为灰色，即黑白效果。

例子：

<!DOCTYPE html>
<html>
<head>
	<title>黑白图片</title>
	<style>
		img{
			filter: grayscale(100%);
		}
	</style>
</head>
<body>
	<img src="https://picsum.photos/200/300" alt="随机图片">
</body>
</html>

其中，img 标签内的 filter 属性将图片转换为灰度图。

结果：

黑白图片

总结

使用 CSS 的 filter 属性可以实现将图像颜色转换为灰度图，从而实现黑白效果。可以通过调节滤镜的强度来调整黑白效果的程度。

以上就是使用 CSS 将图像的颜色更改为黑白的方法，希望对大家有所帮助。