数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用CSS将图像颜色更改为黑白？
使用CSS将图像颜色更改为黑白是一个简单的过程，可以使用多种方法实现。在本文中，我们将学习和理解两种不同的使用CSS将图像更改为黑白的方法。
本文中有一张图片，我们的任务是使用CSS将图片颜色更改为黑白。
将图像颜色更改为黑白的方法
以下列出了使用CSS将图像颜色更改为黑白的方法，并附带逐步说明和完整的示例代码。
使用grayscale过滤器
为了将图像颜色更改为黑白，我们使用了grayscale 过滤器。
- grayscale过滤器接受0%-100%之间的值。
- 过滤器值为0%表示图像应为全彩，100%表示图像应完全为黑白。
- 我们使用了“filter: grayscale(100%);”过滤器，它将图像更改为黑白。
示例
在这个示例中，我们实现了上述步骤，将图像颜色更改为黑白。
<html>
<head>
<title>
Changing color of image in css using a "grayscale" filter
</title>
<style>
body {
text-align: center;
}
.img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<h3>
Change the color of an image to black
and white using CSS
</h3>
<p>
In this example we have used grayscale
filter to Change the color of an image
to black and white.
</p>
<h3>Original Image:</h3>
<img src="/css/images/logo.png" alt="image">
<h3>After using "grayscale" filter:</h3>
<br>
<img class="img" src="/css/images/logo.png" alt="image">
</body>
</html>
使用brightness和saturate过滤器
在这种方法中，我们使用了CSS brightness和saturate过滤器将图像颜色更改为黑白。
- brightness过滤器用于调整整体亮度，控制图像的亮度或暗度。
- “saturate”过滤器用于调整饱和度，控制颜色的强度。
- 我们使用了“filter: brightness(0.5) saturate(0%);”过滤器将图像颜色更改为黑白。
示例
这是一个实现上述步骤以将图像颜色更改为黑白的示例。
<html>
<head>
<title>
Changing color of image using "brightness" and "saturate" filters
</title>
<style>
body {
text-align: center;
}
.img {
filter: brightness(0.5) saturate(0%);
}
</style>
</head>
<body>
<h3>
Change the color of an image to black
and white using CSS
</h3>
<p>
In this example we have used brightness
and saturate filter to Change the color
of an image to black and white.
</p>
<h3>Original Image:</h3>
<img src="/css/images/logo.png" alt="image">
<h3>
After using "brightness" and "saturate" filters
</h3>
<br>
<img class="img" src="/css/images/logo.png" alt="image">
</body>
</html>
结论
使用CSS将图像转换为黑白是一个简单的过程。在本文中，我们了解了如何使用CSS将图像颜色更改为黑白。我们讨论了两种不同的方法，一种是使用**grayscale**过滤器，另一种是使用**brightness**和**saturate**过滤器。
更新于：2024年7月3日
15K+ 次浏览
广告