CSS mask-composite advanced techniques: arbitrary color conversion of a single image

This article introduces you to an advanced image cutting technique based on CSS mask-composite to achieve any color conversion based on a single image. I hope it will be helpful to you!

##By mastering CSS

mask-composite, we can use a picture to get various transformations about it, and even get various different Color transformation. [Recommended learning: css video tutorial]

Get its reverse cut image through a single PNG/SVG

This is what happened Yes, one day, we got such a PNG/SVG picture:

As far as this picture is concerned, it is a PNG picture, and the gray part is transparent.

As the demand progresses, at some point, we need a reverse hollow graphic based on the above graphic:

emmm, please note, The white part here needs to be transparent, so that different background colors can show through, like this:

What should I do? Generally speaking, the only way is to find the UI and then Make a hollow picture.

Of course, today, we only need a PNG/SVG, and we can easily complete the above conversion using CSS. Here we need to use

mask-composite.

What is mask-composite?

So, what is

mask-composite? Of course, at this stage, the browser prefix needs to be added, -webkit-mask-composite.

First of all, to learn to use

mask-composite, you must first know another very important and useful property in CSS -- mask.

If you are still unfamiliar with

mask, I suggest you read this article first--Wonderful CSS MASK

In using mask While the image is being masked and cut, we can also apply the

mask-composite attribute at the same time. This is a very interesting element.

-webkit-mask-composite: Property specifies how multiple mask images applied to the same element are composited with each other.

In layman's terms, its function is that when an element has multiple masks, we can use -webkit-mask-composite to superimpose the effect.

For example:

<div></div>

.original {
    background: #000;
    mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}

We use a

radial-gradient as a mask to cut the original rectangle and get a new graphic.

If I change the direction:

<div></div>

.original {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);
}

If I want to get such an effect:

how should I do it?

We try to combine the effects of the above two masks:

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

The effect is as follows:

It is not the same as we imagined. This is because the superposition of the graphics of the two masks is the effect of the above graphics, so there is no problem with the above effect.

It’s just that what we want is the overlapping part of the two mask graphics:

At this time, we can use

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

After adding

-webkit-mask-composite: source-in, we can get the overlapping part of the two mask graphics, and then apply it to the entire mask based on this overlapping part Mask:

CodePen Demo -- mask-composite Demo:

https://codepen.io/Chokcoco/pen/KKQjxMP

-webkit-mask-composite can also implement many different functions, including but not limited to:

-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></div>
<div></div>
<div></div>
<div></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：

https://codepen.io/Chokcoco/pen/YzaKLEr

这样，仅仅是利用一张 PNG/SVG 原图，我们就可以得到它的

• 反向镂空图

• 其他纯色图

• 渐变色图

可以有效的节省图片资源，起到一定的优化效果！

在之前，我也写过一种基于白底黑图的任意颜色转换，但是存在非常大的局限性：两行 CSS 代码实现图片任意颜色赋色技术，但是今天这个技巧是纯粹的，对原图没有要求的任意色彩转换！

当然，唯一的缺点，目前会受限于 mask-composite 和 -webkit-mask-composite 的兼容性，而且两者的语法存在一定的差异，实际使用的话需要注意。根据业务场景灵活选择。

（学习视频分享：web前端）

The above is the detailed content of CSS mask-composite advanced techniques: arbitrary color conversion of a single image. For more information, please follow other related articles on the PHP Chinese website!