如何仅凭一张图片实现任意颜色到任意颜色的精准转换？

本文共计1721个文字，预计阅读时间需要7分钟。

今天，要介绍一种基于CSS mask-composite的高级技巧。通过掌握它，我们可以通过一张图片，得到关于它的各种变换，甚至得到不同颜色的变换。通过单张PNG/SVG，可以得到它的反向。

今天，要介绍一种基于 CSS mask-composite 的高级技巧。

通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。

通过单张 PNG/SVG 得到它的反向切图

事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片：

就这张图片而言，它是一张 PNG 图，灰色部分透明。

随着需求的进行，在某一处，我们需要一张基于上述图形的反向镂空图形：

emmm，要注意，这里白色处是需要透明的，要能透出不同的背景色，像是这样：

怎么办呢，通常而言，只能是找 UI 再出一张镂空图。

当然，在今天，只需要一张 PNG/SVG，我们就可以使用 CSS 轻松完成上述的转换。这里我们需要用到 mask-composite。

何为 mask-composite？

那么，何为 mask-composite，当然，现阶段还需要加上浏览器前缀，-webkit-mask-composite。

首先，要学会使用 mask-composite，得先知道 CSS 中另外一个非常重要且有用的属性 -- mask。