It's National Day , Everyone is anxious to celebrate the birthday of the mother of the motherland .
Every year at this time , Wechat circle of friends will be popular to decorate the avatar with the national flag , And this is popular again this year ：
emm, Very good .
that , Match a picture of the national flag with our head , Get the avatar you want quickly , Use CSS How to implement it simply ？
Some people think it is to change the transparency of one of the pictures , Not really . Look closely at the combined avatar , The leftmost can only see the red flag, not the original avatar , On the far right, you can only see the head image instead of the red background of the red flag .
stay CSS Use in mask Mask , One line of code to achieve the integration of avatar and national flag
stay CSS in , We just need to overlay the two pictures together , Use... For the upper picture mask attribute , One line of code can achieve this effect .
<div></div>div {
position: relative;
margin: auto;
width: 200px;
height: 200px;
// Normal Avatar
background: url(image1) no-repeat;
background-size: cover;
}
.div::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
// National flag picture
background: url(image2) no-repeat;
background-size: cover;
mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
} In the code above , We used div And a pseudo element of it div::after, The head picture and the national flag are superimposed together .
Only need div::after in , Set a layer mask Mask mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent), We can realize the clever folding of avatar and national flag ：
A brief introduction Mask
stay CSS in ,mask Attribute allows users to hide part or all of the visible area of an element by masking or clipping the image of a specific area .
The most basic , Use mask The way to do this is with pictures , Like this ：
{
/* Image values */
mask: url(mask.png); /* Use bitmaps for masking */
mask: url(masks.svg#star); /* Use SVG The shape in the graph is used as a mask */
}Of course , The way of using pictures is complicated , Because we have to prepare the corresponding image material first , In addition to the pictures ,mask You can also accept a similar background Parameters of , That's gradients .
It is similar to the following usage ：
{
mask: linear-gradient(#000, transparent) /* Use gradients for masking */
}Here's a picture , Add a gradient from transparent to black ,
{
background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #fff);
}
Applied mask after , It's going to be like this ：
This DEMO, It's easy to understand that mask The basic usage of .
It's used here mask The most important conclusion ： Picture vs mask Generated gradual transparent The overlap of , It's going to be transparent .
It is worth noting that , The gradient above uses linear-gradient(90deg, transparent, #fff), there #fff The solid part can be changed to any color , It doesn't affect the effect .
CodePen Demo -- Use MASK Basic use of
utilize Mask Some other tips
Of course , Mastered Mask after , Can play a lot of flowers .
For example, the above national flag head , We can cooperate. CSS @property, Implement some interesting hover effect ：
Or make use of mask Achieve some interesting transition effects ：
Even , The characters of the barrage website block the barrage , All are utilize CSS mask Realized ：
If you want to know more about CSS MASK, You might as well read these two articles carefully ：
Last
Okay , This concludes the article , I hope it helps you :)
Want to Get To the most interesting CSS information , Don't miss my official account -- iCSS Front end anecdotes
More exciting CSS The effect can focus on my CSS inspiration
More exciting CSS Technical articles summarized in mine Github -- iCSS , Continuous updating , Welcome to point a star Subscribe to the collection .
Any questions or Suggestions , Communicate more , Original article , Writing co., LTD. , Pretty good , If there is anything wrong with the text , All hope to inform .