Advanced slicing skills! Arbitrary color conversion based on a single image

Today, I'm going to introduce an advanced technique based on CSS mask-composite .

By mastering it, we can get various transformations about it through a picture, and even get various color transformations.

Get its reverse slice from a single PNG/SVG

This is what happened. One day, we got a PNG/SVG image like this:

As far as this image is concerned, it's a PNG image with the gray parts transparent.

As the requirement progresses, at one point, we need a reverse hollowed-out graphic based on the above:

emmm, it should be noted that the white part here needs to be transparent, and it needs to be able to reveal different background colors, like this:

What to do, usually, you can only find a hollowed-out picture from the UI.

Of course, today, with just a PNG/SVG, we can easily do 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 relatively unfamiliar with mask , I suggest you read this first -- the wonderful CSS MASK

While using mask to mask the image, we can also apply the mask-composite attribute at the same time. This is a very interesting element.

The -webkit-mask-composite : property specifies how multiple mask images applied to the same element are composited into each other.

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

Take a chestnut:

 <div class="original"></div>

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

We use a radial-gradient as a mask, cut the original rectangle, and get a new shape.

If you change the direction again:

 <div class="original"></div>

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

If I want to get an effect like this:

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 what we imagined. This is because the superposition of the graphics of the two masks is the effect of the above graphics, so the above effect is no problem.

However, what we want to get is the overlapping part of the two mask graphics:

At this point, 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 the entire mask based on this overlapping part:

CodePen Demo -- mask-composite Demo

-webkit-mask-composite can also achieve 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; /*只显示不重合的地方*/

Take a look at this picture, it is clear at a glance (the picture comes from CSS mask to achieve the mouse following hollow effect )

Use -webkit-mask-composite to realize the extension of the picture

Based on the above knowledge, back to our theme, after we have a transparent image (PNG/SVG), we can easily use -webkit-mask-composite to get its reverse hollow map:

 .mask {
    background: #000;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: exclude;
}

Not only that, we can also use this technique to use the image itself as a mask, and cooperate with -webkit-mask-composite to expand a solid color image to various colors, even gradient colors!

 <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

In this way, just using a PNG/SVG original image, we can get its

1. Reverse cutout
2. Other solid color images
3. gradient color map

It can effectively save image resources and achieve a certain optimization effect!

Before, I also wrote an arbitrary color conversion based on a black image on a white background, but there are very big limitations: two lines of CSS code to achieve the technology of arbitrary color assignment of images , but today this technique is pure, and it does not affect the original image. No arbitrary color conversion required !

Of course, the only drawback is currently limited by the compatibility of mask-composite and -webkit-mask-composite , and the syntax of the two is different, so you need to pay attention to the actual use. Flexible choices based on business scenarios.

at last

A very interesting skill, have you learned it? This concludes this article, I hope it helps you :)

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.