本篇文章给大家介绍一种基于 css mask-composite 的高级切图技巧，实现基于单张图片的任意颜色转换，希望对大家有所帮助！
通过掌握 CSS mask-composite ，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。【推荐学习：css视频教程】
通过单张 PNG/SVG 得到它的反向切图
事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片：
立即学习“前端免费学习笔记（深入）”；
就这张图片而言，它是一张 PNG 图，灰色部分透明。
随着需求的进行，在某一处，我们需要一张基于上述图形的反向镂空图形：
emmm，要注意，这里白色处是需要透明的，要能透出不同的背景色，像是这样：
怎么办呢，通常而言，只能是找 UI 再出一张镂空图。
当然，在今天，只需要一张 PNG/SVG，我们就可以使用 CSS 轻松完成上述的转换。这里我们需要用到 mask-composite。
何为 mask-composite？
那么，何为 mask-composite，当然，现阶段还需要加上浏览器前缀，-webkit-mask-composite。
首先，要学会使用 mask-composite，得先知道 CSS 中另外一个非常重要且有用的属性 — mask。
如果，你对 mask 还比较陌生，建议你先看看这篇 — 奇妙的 CSS MASK
在运用 mask 对图片进行遮罩切割处理的同时，我们可以同时再运用到 mask-composite 属性。这个是非常有意思的元素。
-webkit-mask-composite：属性指定了将应用于同一元素的多个蒙版图像相互合成的方式。
通俗点来说，他的作用就是，当一个元素存在多重 mask 时，我们就可以运用 -webkit-mask-composite 进行效果叠加。
举个栗子：
.original { background: #000; mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);}
我们用一个 radial-gradient 作为 mask，切割原本的矩形，得到一个新的图形。
如果再换一个方向：
.original { background: #000; mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);}
如果我想得到这样一个效果：
该怎么做呢？
我们尝试合并上述两个 mask 的效果：
.mask { background: #000; mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px), radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);}
效果如下：
与我们想象的不太一样，这是因为，两个 mask 的图形叠加，就是上述图形的效果，所以上述效果是没有问题的。
只是，我们想得到的是两个 mask 图形的重叠部分：
这时，我们就可以使用 mask-composite：
.mask { background: #000; mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px), radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px); -webkit-mask-composite: source-in;}
添加了 -webkit-mask-composite: source-in 后，我们就可以得到两个 mask 图形的重叠部分，再基于这个重叠部分作用到整个 mask 遮罩：
CodePen Demo — mask-composite Demo：
https://codepen.io/Chokcoco/pen/KKQjxMP
-webkit-mask-composite 还可以实现非常多不同的功能，包括但不限于：
-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/-webkit-mask-composite: source-over; -webkit-mask-composite: source-in; /*只显示重合的地方*/-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/-webkit-mask-composite: source-atop;-webkit-mask-composite: destination-over;-webkit-mask-composite: destination-in; /*只显示重合的地方*/-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/-webkit-mask-composite: destination-atop;-webkit-mask-composite: xor; /*只显示不重合的地方*/
看看这张图，就一目了然（图片源自 CSS mask 实现鼠标跟随镂空效果）
使用 -webkit-mask-composite 实现图片的扩展
基于上述的知识铺垫，回到我们的主题，在我们有了一张透明图片（PNG/SVG）之后，我们可以轻松的利用 -webkit-mask-composite 得到它的反向镂空图：
.mask { background: #000; mask: url($img), linear-gradient(#fff, #000); mask-composite: exclude;}
不仅如此，我们还可以利用这个技巧，使用图片本身作为 mask 遮罩，配合 -webkit-mask-composite，从而将一张纯色图片，扩展到各类不同颜色，甚至是渐变色！
.original { background: url($img); background-size: cover;}.mask { background: #000; mask: url($img), linear-gradient(#fff, #000); mask-composite: exclude;}.mask-color { background: green; mask: url($img), linear-gradient(#fff, #000); mask-composite: source-in;}.mask-gradient { background: linear-gradient(blue, yellowgreen); mask: url($img), linear-gradient(#fff, #000); mask-composite: source-in;}
CodePen Demo — Power of mask-composite：
https://codepen.io/Chokcoco/pen/YzaKLEr
这样，仅仅是利用一张 PNG/SVG 原图，我们就可以得到它的
反向镂空图
其他纯色图
渐变色图
可以有效的节省图片资源，起到一定的优化效果！
在之前，我也写过一种基于白底黑图的任意颜色转换，但是存在非常大的局限性：两行 CSS 代码实现图片任意颜色赋色技术，但是今天这个技巧是纯粹的，对原图没有要求的任意色彩转换！
当然，唯一的缺点，目前会受限于 mask-composite 和 -webkit-mask-composite 的兼容性，而且两者的语法存在一定的差异，实际使用的话需要注意。根据业务场景灵活选择。
（学习视频分享：web前端）
以上就是CSS mask-composite高级技巧：单张图片的任意颜色转换的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1624596.html
微信扫一扫 
支付宝扫一扫 
