今天,要介绍一种基于 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
。
如果,你对
mask
还比较陌生,建议你先看看这篇 – 奇妙的 CSS MASK