乐趣区

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

jiezi

明天，要介绍一种基于 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 的兼容性，而且两者的语法存在肯定的差别，理论应用的话须要留神。依据业务场景灵便抉择。

最初

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

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

退出移动版