让 UI 早点下班,高阶切图技巧!基于单张图片的任意颜色转换!
共 5586字,需浏览 12分钟
·
2022-07-09 14:14
今天,要介绍一种基于 CSS mask-composite
的高级技巧。
通过掌握它,我们可以通过一张 图片,得到关于它的各种变换,甚至乎,得到各种不同颜色的变换。
通过单张 PNG/SVG 得到它的反向切图
事情的经过是这样的,某天,我们拿到了这样一张 PNG/SVG 图片:
![](https://filescdn.proginn.com/ddf1a50103e6f933a1d1f27aa2046781/e40fe66b9683dbb1924ca8f5735dff8f.webp)
就这张图片而言,它是一张 PNG 图,灰色部分透明。
随着需求的进行,在某一处,我们需要一张基于上述图形的反向镂空图形:
![](https://filescdn.proginn.com/944527aea2b29ea9c6379ea342977b78/515808627dbd7365336a0fdba1cb30d8.webp)
emmm,要注意,这里白色处是需要透明的,要能透出不同的背景色,像是这样:
![](https://filescdn.proginn.com/8abeaded0af8c37f7afe9fcc9c94f73b/f8a444dde6e319a4933150e7b506ccae.webp)
怎么办呢,通常而言,只能是找 UI 再出一张镂空图。
当然,在今天,只需要一张 PNG/SVG,我们就可以使用 CSS 轻松完成上述的转换。这里我们需要用到 mask-composite
。
何为 mask-composite
?
那么,何为 mask-composite
,当然,现阶段还需要加上浏览器前缀,-webkit-mask-composite
。
首先,要学会使用 mask-composite
,得先知道 CSS 中另外一个非常重要且有用的属性 -- mask
。
如果,你对
mask
还比较陌生,建议你先看看这篇 -- 奇妙的 CSS MASK[1]
在运用 mask 对图片进行遮罩切割处理的同时,我们可以同时再运用到 mask-composite
属性。这个是非常有意思的元素。
-webkit-mask-composite[2]: 属性指定了将应用于同一元素的多个蒙版图像相互合成的方式。
通俗点来说,他的作用就是,当一个元素存在多重 mask 时,我们就可以运用 -webkit-mask-composite 进行效果叠加。
举个栗子:
<div class="original"></div>
.original {
background: #000;
mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}
我们用一个 radial-gradient
作为 mask,切割原本的矩形,得到一个新的图形。
![](https://filescdn.proginn.com/2df7010d9055ba9a18ef6e7a3807c76b/5d1974ef12361c3f22d30a905128bc2d.webp)
如果再换一个方向:
<div class="original"></div>
.original {
background: #000;
mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);
}
![](https://filescdn.proginn.com/f4d99d279208751307a0e3c8e781afba/1fafc0952730a250c79679bff0afda43.webp)
如果我想得到这样一个效果:
![](https://filescdn.proginn.com/0ddf7515f503fec5361c9c59131a2dc7/6b91e51164658ad8a40d0a8d232dd253.webp)
该怎么做呢?
我们尝试合并上述两个 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);
}
效果如下:
![](https://filescdn.proginn.com/01a798ac3d3725a66201a226f1eea1af/619be1a9ad74643a8a7770ce43540d1b.webp)
与我们想象的不太一样,这是因为,两个 mask 的图形叠加,就是上述图形的效果,所以上述效果是没有问题的。
只是,我们想得到的是两个 mask 图形的重叠部分:
![](https://filescdn.proginn.com/05e86e2c663f0543845dd3bbf1f0fe54/93fe53a0c6eff53e77378e18e410b702.webp)
这时,我们就可以使用 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 遮罩:
![](https://filescdn.proginn.com/fd7c1003d0137da70639d069fecad6db/06b56c7d469b8f3f5ceab5309074f589.webp)
CodePen Demo -- mask-composite Demo[3]
-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 实现鼠标跟随镂空效果[4])
![](https://filescdn.proginn.com/b7facf9ec0968630984a547a4eef8005/5826d945b7993973349e856d2a0a2e88.webp)
使用 -webkit-mask-composite
实现图片的扩展
基于上述的知识铺垫,回到我们的主题,在我们有了一张透明图片(PNG/SVG)之后,我们可以轻松的利用 -webkit-mask-composite
得到它的反向镂空图:
.mask {
background: #000;
mask:
url($img),
linear-gradient(#fff, #000);
mask-composite: exclude;
}
![](https://filescdn.proginn.com/d34f0c4c87f91484cce62f4fa4c0be49/a8859894752cf7c6d855425472d048fa.webp)
不仅如此,我们还可以利用这个技巧,使用图片本身作为 mask 遮罩,配合 -webkit-mask-composite
,从而将一张纯色图片,扩展到各类不同颜色,甚至是渐变色!
<div class="original"></div>
<div class="mask"></div>
<div class="mask-color"></div>
<div class="mask-gradient"></div>
.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;
}
效果如下:
![](https://filescdn.proginn.com/a9656669f505e4c0b9e680b6db92dc3b/78a76738a59a82c61727759c16360e81.webp)
CodePen Demo -- Power of mask-composite[5]
这样,仅仅是利用一张 PNG/SVG 原图,我们就可以得到它的
反向镂空图 其他纯色图 渐变色图
可以有效的节省图片资源,起到一定的优化效果!
在之前,我也写过一种基于白底黑图的任意颜色转换,但是存在非常大的局限性:两行 CSS 代码实现图片任意颜色赋色技术[6],但是今天这个技巧是纯粹的,对原图没有要求的任意色彩转换!
当然,唯一的缺点,目前会受限于 mask-composite
和 -webkit-mask-composite
的兼容性,而且两者的语法存在一定的差异,实际使用的话需要注意。根据业务场景灵活选择。
最后
非常有意思的一个技巧,你学会了吗?本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
参考资料
奇妙的 CSS MASK: https://github.com/chokcoco/iCSS/issues/80
[2]-webkit-mask-composite: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite
[3]CodePen Demo -- mask-composite Demo: https://codepen.io/Chokcoco/pen/KKQjxMP
[4]CSS mask 实现鼠标跟随镂空效果: https://segmentfault.com/a/1190000040996523
[5]CodePen Demo -- Power of mask-composite: https://codepen.io/Chokcoco/pen/YzaKLEr
[6]两行 CSS 代码实现图片任意颜色赋色技术: https://github.com/chokcoco/iCSS/issues/32