让UI早点下班，进阶切割技巧！基于单张图片的任意颜色转换！
时间：2023-03-19 02:02:08
科技观察
今天，我想介绍一种基于CSSmask-composite的高级技术。掌握了它，我们可以通过一张图片获得关于它的各种变换，甚至可以得到不同颜色的各种变换。通过单个PNG/SVG获取其反切图的过程是这样的。有一天，我们得到了这样一张PNG/SVG图片：这是一张PNG图片，灰色部分是透明的。对于此图像，它是具有透明灰色部分的PNG图像。随着需求的推进，到了一定的时候，我们需要在上图的基础上做一个反向镂空的图形：emmm，需要注意的是这里的白色部分需要透明，这样可以显露出不同的底色，像这样:怎么办，一般来说只能找UI，做个镂空图。当然，今天我们只需要一个PNG/SVG，我们可以使用CSS轻松完成上述转换。这里我们需要使用mask-composite。什么是掩膜复合材料？那么，什么是mask-composite？当然，这个阶段需要加上浏览器前缀，-webkit-mask-composite。首先，要学习使用mask-composite，你必须先知道CSS中另一个非常重要和有用的属性——mask。如果您对掩码还比较陌生，我建议您先阅读这篇文章——精彩的CSSMASK[1]。在使用mask对图像进行遮罩和裁剪的同时，我们还可以同时应用mask-composite属性。这是一个非常有趣的元素。-webkit-mask-composite[2]：该属性指定应用于同一元素的多个蒙版图像如何相互合成。通俗地说，它的作用就是当一个元素有多个遮罩时，我们可以使用-webkit-mask-composite来叠加效果。举个栗子：
.original{background:#000;mask:radial-gradient(circleat00,#000,#000200px,transparent200px);}我们用一个Radial-gradient作为mask来切割原来的矩形得到一个新的图形。如果再次改变方向：
.original{background:#000;mask:radial-gradient(circleat100%0,#000,#000200px,transparent200px);}如果我想得到这样的效果：我应该怎么做？我们尝试结合以上两种蒙版的效果：.mask{background:#000;mask:radial-gradient(circleat100%0,#000,#000200px,transparent200px),radial-gradient(circleat00,#000,#000200px,transparent200px);}效果如下：和我们想象的不太一样，因为两个蒙版的图形叠加就是上面图形的效果，所以上面的效果是没有问题的。只不过我们要得到的是两个mask图形重叠的部分：这时候我们可以使用mask-composite:.mask{background:#000;遮罩：径向渐变（圆圈在100%0，#000，#000200px，透明200px），径向渐变（圆圈在00，#000，#000200px，透明200px）；-webkit-mask-composite:source-in;}添加了-webkit-mask-composite:source-in之后，我们就可以得到两个遮罩图形的重叠部分，然后将重叠部分应用于整个遮罩遮罩：CodePenDemo——mask-compositeDemo[3]。-webkit-mask-composite还可以实现很多不同的功能，包括但不限于：-webkit-mask-composite:clear；/*清除，不显示任何遮罩*/-webkit-mask-composite:copy;/*只显示上掩码，不显示下掩码*/-webkit-mask-composite:source-over;-webkit-mask-composite：来源；/*只显示重叠部分*/-webkit-mask-composite:source-out;/*只显示上面的mask，不显示重叠的地方*/-webkit-mask-composite:source-atop;-webkit-mask-composite:destination-over;-webkit-mask-composite:destination-in;/*只显示重叠的地方*/-webkit-mask-composite:destination-out;/*只显示下面的mask，不显示重叠的地方*/-webkit-mask-composite:destination-atop;-webkit-mask-composite:xor;/*只显示不重叠的地方*/看这张图，一目了然（图片来自CSSmask实现鼠标跟随镂空效果[4]）。使用-webkit-mask-composite实现图片的扩展就是基于以上知识。回到我们的主题，当我们有了一张透明图片（PNG/SVG）之后，我们可以很容易地使用-webkit-mask-composite来得到它的反向骨架图：.mask{background:#000;遮罩：url($img)、线性渐变(#fff、#000)；mask-composite:exclude;}不仅如此，我们还可以利用这一招，将图片本身作为遮罩，配合-webkit-mask-composite，从而将纯色图片扩展为各种颜色，甚至渐变颜色！
