问题场景

有一张主体部分为任意颜色，其余位置透明的png图标图片，现在希望将这张图片进行重新着色。

最终效果

实现和解释

CSS mask

mask这个词应该接触过Adobe系列软件（或者喜欢在PowerPoint里面玩骚操作）的同学都接触过。它的概念很简单，就是在最上层的图层当中挖一个洞，下面的图层自然就可以透过这个洞展示出来了。

大部分现代浏览器（IE不支持）都支持mask声明。不同的是，在Webkit内核的浏览器（例如使用Chromium内核的浏览器）当中，需要显式指明“-webkit-mask…”，浏览器才会接受这些声明。在一些前端框架例如Vue.js当中，可以通过 :src="{ maskImage：… }"来让Vue决定是否应该加上-webkit前缀。

一张png图片能够被用作mask的前提条件是图片当中必须含有透明部分（主体颜色不限）。如果图片不透明，那么浏览器就会将图片所占的矩形区域作为mask整体来使用，在这种情况下还不如直接指定节点的宽度和高度。在这种情况下，应该使用复合背景并将“background-blend-mode”设置为“lighten”（仅对主体颜色比目标颜色深的图片生效）。

在了解了这些过后，就可以使用“mask-image”来设置遮罩图像了。

（以下css全部基于上面的html结构）

——玩我是吧，阿婆？

——作为遮罩的图像不会根据元素大小进行适配，默认是图像的原本大小。就像指定其他图片元素的宽度和高度一样，也需要使用“(-webkit-)mask-size”来指定遮罩的大小。

——行，那给我来个64px的吧。

——如果遮罩尺寸小于元素尺寸，那么浏览器的默认行为将会是重复（repeat）这一遮罩。

如果要避免的话，可以使用“no-repeat”来防止这个行为。但是我个人不太推荐这个用法，因为这代表着设计者自己对这个元素应该显示多大也不知道，要扣工资的。

zongjie

总结