关于前端:高阶切图技巧基于单张图片的任意颜色转换

144次阅读

共计 3224 个字符,预计需要花费 9 分钟才能阅读完成。

明天,要介绍一种基于 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

在使用 mask 对图片进行遮罩切割解决的同时,咱们能够同时再使用到 mask-composite 属性。这个是十分有意思的元素。

-webkit-mask-composite: 属性指定了将利用于同一元素的多个蒙幅员像互相合成的形式。

艰深点来说,他的作用就是,当一个元素存在多重 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,切割本来的矩形,失去一个新的图形。

如果再换一个方向:

<div class="original"></div>
.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

-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,从而将一张纯色图片,扩大到各类不同色彩,甚至是渐变色!

<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;
}

CodePen Demo — Power of mask-composite

这样,仅仅是利用一张 PNG/SVG 原图,咱们就能够失去它的

  1. 反向镂空图
  2. 其余纯色图
  3. 渐变色图

能够无效的节俭图片资源,起到肯定的优化成果!

在之前,我也写过一种基于白底黑图的任意色彩转换,然而存在十分大的局限性:两行 CSS 代码实现图片任意色彩赋色技术, 然而明天这个技巧是纯正的,对原图没有要求的任意色调转换

当然,惟一的毛病,目前会受限于 mask-composite-webkit-mask-composite 的兼容性,而且两者的语法存在肯定的差别,理论应用的话须要留神。依据业务场景灵便抉择。

最初

十分有意思的一个技巧,你学会了吗?本文到此结束,心愿对你有帮忙 :)

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

正文完
 0