添加 CSS
现在，我们向“image-1”和“image-2”类添加样式。
- 使用 width 属性设置两个图像的宽度。
- 使用“image-1”类上的“反转”值设置过滤器属性。我们设置 100% 使图像完全倒置。
- 在“image-2”类上使用带有“sepia”值 (100%) 的过滤器属性。
img {
width: 40%;
float: left;
}
.image-1 {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.image-2 {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
所以，让我们看看我们的代码的结果。
更改 PNG 图像颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>Convert image into different color</title>
<style>
img {
width: 40%;
float: left;
}
.image-1 {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.image-2 {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<img class="image-1" src="sea.png" width="500px" height="250px" alt="filter applied" />
<img class="image-2" src="city.png" width="500px" height="250px" alt="filter applied" />
</body>
</html>
接下来，让我们看另一个具有 8 个 filter 属性值的示例。
使用某些过滤器样式更改 PNG 图像颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #03030a;
min-width: 800px;
min-height: 400px
}
img {
width: 20%;
float: left;
margin: 0;
}
/*Filter styles*/
.saturate {
filter: saturate(3);
-webkit-filter: saturate(3);
}
.grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.contrast {
filter: contrast(160%);
-webkit-filter: contrast(160%);
}
.brightness {
filter: brightness(0.25);
-webkit-filter: brightness(0.25);
}
.blur {
filter: blur(3px);
-webkit-filter: blur(3px);
}
.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
.huerotate {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
}
.opacity {
filter: opacity(50%);
-webkit-filter: opacity(50%);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<img alt="Mona Lisa" src="notebook.jpg" title="oroirnal">
<img alt="Mona Lisa" src="notebook.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="notebook.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="notebook.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="notebook.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="notebook.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="notebook.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="notebook.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="notebook.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="notebook.jpg" title="opacity" class="opacity">
</body>
</html>
我们还可以应用另一种技术。
在下一个示例中，我们为 <div> 元素设置了 id 属性（“oroirnal”和“changed”）。
然后，我们设置过滤器：hue-rotate;在“更改”的 ID 上。
改变PNG图片颜色的例子：
<!DOCTYPE html>
<html>
<head>
<title>Convert image into different color</title>
<style>
#oroirnal,
#changed {
background: url('notebook.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<div id="oroirnal"></div>
<div id="changed"></div>
</body>
</html>
在本教程中，我们将在 CSS 的帮助下更改 PNG 图像颜色。
更改 png 图像颜色的最简单方法是使用 filter 属性，该属性将视觉效果应用于元素（图像）。
它具有以下值：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;
使用这些值，我们可以更改图像的颜色。
过滤器是浏览器的新功能，仅在现代浏览器中受支持。
我们可以将 -webkit-filter 用于 Safari、Google Chrome 和 Opera。
让我们一步一步地改变图像颜色。
创建 HTML
- 将图片链接复制并粘贴到 <body> 部分。
我们使用两个类别为“image-1”和“image-2”的图像。
<body> <img class="image-1" src="sea.png" width="500px" height="250px" alt="filter applied" /> <img class="image-2" src="city.png" width="500px" height="250px" alt="filter applied" /> </body>
日期：2020-06-02 22:15:00 来源：oir作者：oir