National Day, we are anxious to celebrate the mother of the motherland.

Every year at this time, it is popular to decorate your profile picture with the national flag on wechat moments, and this one is popular again this year:

Emm, pretty good.

So, a flag picture and our avatar, quickly get the desired avatar, using CSS how to achieve simple?

Some people think it is changing the transparency of one of the images, but it is not. After careful observation of the composite head, the left side can only see the original content of the red flag, while the right side can only see the head without the red background of the red flag.

In the CSS mask mask, one line of code to achieve the fusion of the head and the flag

In CSS, we simply superimpose two images on top of each other and apply the mask attribute to the top image in one line of code to achieve this effect.

<div></div>
Copy the code
div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px; // Normal avatarbackground: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; // Flag imagebackground: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg.# 000 10%, transparent 70%, transparent);
}
Copy the code

In the code above, we use div and one of its pseudo-elements, div:: After, to superimpose the avatar and the flag.

Just set a mask mask mask: Linear-gradient (110deg, #000 10% transparent 70% transparent) in div:: After, we can achieve the clever overlap between the avatar and the flag:

A little bit about masks

In CSS, the mask attribute allows the user to hide part or all of an element’s visible area by masking or cropping a specific area of the image.

The most basic way to use a mask is with a picture, something like this:

{
    /* Image values */
    mask: url(mask.png);                       /* Use bitmap to mask */
    mask: url(masks.svg#star);                 /* Use shapes in SVG graphics to mask */
}
Copy the code

Of course, the method of using images is actually quite complicated, because we need to prepare corresponding image materials first. In addition to images, masks can also accept a parameter similar to background, that is, gradient.

Similar to the following usage:

{
    mask: linear-gradient(# 000Transparent) /* Use gradient mask */}Copy the code

Here’s an image with a gradient from transparent to black,

{
    background: url(image.png);mask: linear-gradient(90deg, transparent, #fff);
}
Copy the code

After mask is applied, it looks like this:

In this DEMO, we can briefly understand the basic use of mask.

Here comes the most important conclusion about using masks: the overlap between the image and the gradient transparent generated by the mask will become transparent.

Note that the gradient above was linear-gradient(90deg, transparent, # FFF). The # FFF plain color can be changed to any color without affecting the effect.

CodePen Demo – Basic use of masks

Some other tips for using masks

Of course, after mastering Mask, you can play a lot of flowers.

For example, with the flag image above, we can use CSS @Property to achieve some interesting hover effects:

Or use masks for some fun transitions:

Even, the bullet screen is realized by using CSS mask:

If you want to learn more about CSS Masks, take a look at these two articles:

  • Fantastic CSS MASK
  • Mask is used to realize the mask filtering of video bullet screen

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More wonderful CSS effects can follow my CSS inspiration

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.