如何使用 CSS 更改 PNG 图像的颜色？

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过各种示例学习如何使用 CSS 更改 PNG 图像的颜色。

PNG 图像是透明图像。我们可以使用以下 CSS 样式更改 PNG 图像的颜色

以上属性用于设置图像的视觉效果。filter 属性有很多值。这些值可以根据需要使用。

以下是使用 CSS 更改 PNG 图像颜色的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> How to change the color of PNG image using CSS </title>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<style>
body { 
  text-align: center;
  padding: 20px;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-WebKit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
.preview {
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}
input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover {
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}
.red {
  background: red;
}
.red:checked {
  background: linear-gradient(brown, red)
}
.black {
  background: red;
}
.black:checked {
  background: linear-gradient(red, black)
}
.green {
  background: green;
}
.green:checked { 
  background: linear-gradient(green, lime);
}
.yellow {
  background: yellow;
}
.yellow:checked {
  background: linear-gradient(orange, yellow);
}
.purple {
  background: purple;
}
.pink { 
  background: pink;
}
.purple:checked {
  background: linear-gradient(purple, violet);
}
.red:checked ~ img {
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}
.black:checked ~ img {
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 black);
  filter: opacity(.5) drop-shadow(0 0 0 black);
}
.green:checked ~ img {
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img {
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img {
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img {
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img {
  width: 394px;
  height: 375px;
  position: relative;
}
.label {
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}
::selection {
  background: #000;
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 22px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
font-family: "Lucida Console", "Courier New", monospace;
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h3 {  
text-align: center; 
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 400;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
</style>
<body>
<h1> Example </h1>
<h2> How to change color of PNG image using CSS </h2>
<div class = "preview">
  <input class = 'red' name = 'color' type = 'radio' />
   <input class = 'black' name = 'color' type = 'radio' />
  <input class = 'green' name = 'color' type = 'radio' />
    <input class = 'pink' name = 'color' type = 'radio' />
  <input checked class = 'yellow' name = 'color' type = 'radio' />
  <input class = 'purple' name = 'color' type = 'radio' />  
  <img src = "2.png"/>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个如何使用 CSS 更改 PNG 图像颜色的示例。我们可以使用各种单选按钮来更改图像的颜色。

输出

以下是这个例子的输出。

How to change the color of a PNG image using CSS

示例 2

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> How to change color of PNG image using CSS </title>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<style>
body { 
  text-align: center;
  padding: 20px;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-WebKit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; 
}
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
     0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
img {
    width: 20%;
    float: left; 
     margin: 0;
border: 2px solid #555;
}
.saturate { filter: saturate(3); 
-webkit-filter: invert(100%); }
.grayscale { filter: grayscale(100%); 
-webkit-filter: invert(100%); }
.contrast { filter: contrast(160%); 
-webkit-filter: invert(100%); }
.brightness { filter: brightness(0.25); 
-webkit-filter: invert(100%); }
.blur { filter: blur(3px); 
-webkit-filter: invert(100%);  }
.invert { filter: invert(100%); 
-webkit-filter: invert(100%); }
.sepia { filter: sepia(100%); 
-webkit-filter: invert(100%); }
.huerotate { filter: hue-rotate(180deg);
 -webkit-filter: invert(100%); }
.rss.opacity { filter: opacity(50%); 
-webkit-filter: invert(100%); }
h2 { 
text-align: center; 
color: #46a294; 
font-size: 22px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
font-family: "Lucida Console", "Courier New", monospace;
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h3 {  
text-align: center; 
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 600;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
</style>
<body>
<h1> Example </h1>
<h2> How to change the color of PNG image using CSS </h2>
<img alt = "user" src = "2.png" title = "original">
<img alt = "user" src = "2.png" title = "saturate" width = "500px" height = "250px" class = "saturate">
<img alt = "user" src = "2.png" width = "500px" height = "250px" title = "grayscale" class = "grayscale">
<img alt = "user" src = "2.png" width = "500px" height = "250px" title = "contrast" class = "contrast">
<img alt = "user" src = "2.png" title = "brightness" width = "500px" height = "250px" class = "brightness">
<img alt = "user" src = "2.png" width = "500px" height = "250px" title = "blur" class = "blur">
<img alt = "user" width = "500px" height = "250px" src = "2.png" title = "invert" class = "invert">
<img alt = "user" src = "2.png" width = "500px" height = "250px" title = "sepia" class = "sepia">
<img alt = "user" src = "2.png" width = "500px" height = "250px" title = "huerotate" class = "huerotate">
<img alt = "user" src = "2.png" width = "500px" height = "250px" title = "opacity" class = "rss opacity">
</body>
</html>

说明

在上面的示例中，我们创建了一个如何使用 CSS 更改 PNG 图像颜色的示例。在此，我们对 PNG 图像应用了各种滤镜效果。

输出

在修改 HTML 中的样式后，以下是此示例的输出。

下一主题如何在 CSS 中为数字添加圆形

如何使用 CSS 更改 PNG 图像的颜色？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何使用 CSS 更改 PNG 图像的颜色？

示例 1

示例 2

相关帖子

CSS Formatter

CSS Class Selector

CSS Ellipsis

CSS 中的 Linear Gradient

CSS Center Tag

CSS Portal Login

CSS Watch Animation

CSS 的用途是什么

CSS Form

CSS 中如何更改链接颜色

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器