一、背景和意义
在前端开发中，有时需要修改一些png格式的图标的颜色，比如用户点击某个图标之前是某一种颜色，点击之后是另外一种颜色。而CSS属性mask正好可以实现这一效果，文本给出相关的示例。
二、代码示例
在这里我们使用经典的Java的图标（素材地址 https://brandlogos.net/wp-content/uploads/2021/11/java-logo-768x768.png ）作为示例：
相关的HTML代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<style>
.origin {
width: 200px;
height: 200px;
}
.color-changed {
width: 200px;
height: 200px;
background: green;
mask: url("java-logo-768x768.png");
mask-size: 100% 100%;
}
</style>
</head>
<body>
<h1>原图</h1>
<img class="origin" src="java-logo-768x768.png">
<h1>变绿的效果</h1>
<div class="color-changed"></div>
</body>
</html>
需要注意的是，java-logo-768x768.png 这张图片需要下载下来放到本地或者测试服务器上，因为mask属性需要引用同域名下的图片，否则会出现跨域访问错误。
将前面的html代码保存为mask.html文件，连同 java-logo-768x768.png 一起放在本地的nginx服务器的网页文件目录下，访问 http://localhost/mask.html，看到的显示效果如下：
当然，也可以使用渐变色，相关的html代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<style>
.origin {
width: 200px;
height: 200px;
}
.color-changed {
width: 200px;
height: 200px;
background: green;
mask: url("java-logo-768x768.png");
mask-size: 100% 100%;
}
</style>
</head>
<body>
<h1>原图</h1>
<img class="origin" src="java-logo-768x768.png">
<h1>变绿的效果</h1>
<div class="color-changed"></div>
<h1>渐变色效果</h1>
<div class="color-changed" style="background: linear-gradient(to bottom, red, green)"></div>
</body>
</html>
运行效果如下：
