使用 CSS background-blend-mode 属性的解决方案
现代浏览器提供了一种使图像灰度化的新方法。
背景混合模式允许我们获得一些有趣的效果，例如灰度转换。
将此属性设置为其在白色背景上的“亮度”值。
使用 background-blend-mode 属性创建灰度图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.example {
width: 400px;
height: 300px;
background: url("/notebook.jpeg"), #fff;
background-size: cover;
}
.example:hover {
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<h2>使用 HTML/CSS 将图像转换为灰度</h2>
<div class="example"></div>
</body>
</html>
我们可以动画效果设置 3 层。
第一个是图像，第二个是白黑渐变。
在渐变的白色部分，我们将获得与以前相同的效果。
在渐变的黑色部分，我们将图像与其自身混合，结果是未修改的图像。
使用线性渐变创建灰度图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 450px;
height: 400px;
}
.example {
background: url("/notebook.jpeg"), linear-gradient(0deg, white 33%, black 66%), url("/pencil.jpeg");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 1.5s;
}
.example:hover {
background-position: 0px 0px, 0px 70%, 0px 0px;
}
</style>
</head>
<body>
<h2>使用 HTML/CSS 将图像转换为灰度</h2>
<div class="example"></div>
</body>
</html>
有很多方法可以在 CSS 的帮助下使图像灰度化。
在这个片段中，我们将学习如何使用 CSS 属性将彩色图像转换为灰度。
使用 CSS filter 属性的解决方案
在下面的示例中，我们将图像放在 <img> 标签中，然后使用过滤器属性的“灰度”值。
用于 Safari、Google Chrome 和 Opera（较新版本）的 -Webkit- 与 filter 属性一起使用。
使用 filter 属性创建灰度图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</style>
</head>
<body>
<h2>使用 HTML/CSS 将图像转换为灰度</h2>
<img src="/bg.jpg" width="400" height="300" alt="tree" />
</body>
</html>
结果
使用 HTML/CSS 将图像转换为灰度
现在，让我们看另一个例子。
创建具有悬停效果的灰度图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h2>使用 HTML/CSS 将图像转换为灰度</h2>
<img src=" /bg.jpg" width="400" height="300" alt="tree" />
</body>
</html>
日期：2020-06-02 22:15:01 来源：oir作者：oir