CSS tips | one line of code to realize the integration of avatar and national flag

chokcoco 2021-10-13 05:26:04
css tips line code realize

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 {
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 :


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 .


  1. Javascript——面向对象
  2. Liu Yifei is really not afraid to walk away? Honey peach's figure appears in a large backless dress. It's really popular
  3. 学透CSS-如何组织你的CSS代码
  4. Le chapitre de Shen jilan sur le service méritoire a pris fin, la réputation publique a diminué, mais les trois points de vue ne peuvent toujours pas être ignorés
  5. He was abandoned by his parents when he was three years old. When he grew up, he became popular in art. His biological parents came to recognize him. The outcome was very helpless
  6. Nouvelle grande expérience de prise de vue en direct 2022 Geely Howe
  7. Javascript——判断数据类型的四种方法
  8. Jouer est un jeu, perdre est la vie: le jeu du calmar du point de vue juridique
  9. "Harry Potter" is crooked and less than 166 tall! A sequel to Harry Potter?
  10. 前端面试每日 3+1 —— 第910天
  11. 前端面试每日 3+1 —— 第909天
  12. React Foundation
  13. Webpack packaging style resources and HTML resources
  14. 2021 Internet manufacturers' Java face-to-face collection, Java front-end interview questions
  15. Xiao Zhan zero sent a document to celebrate the birthday of the motherland. Millions of fans praised it one after another. The blessing copy was moving
  16. La nouvelle Volkswagen Santana rendered blue body Painted hard look est prévue pour l'année prochaine
  17. His wife has cancer and his husband is affectionate. These five male stars can be called "peerless good men"
  18. Tianjin Auto Show: Toyota's fourth generation ths architecture blessing! GAC motor's second generation gs8 pre-sale is open!
  19. Nodejs + Serverless实现LaTeX公式渲染服务
  20. vue源码分析之数据流向
  21. Algorithmes quotidiens & questions d'entrevue️⃣(1)️⃣(interviewer les commandes Linux)
  22. Analyse des questions d'entrevue: déstockage des tableaux et complexité temporelle
  23. Flux de données pour l'analyse des sources de vue
  24. Take group photos, sing songs and write blessings... Everyone on the Fuxing train celebrates the national day
  25. React核心 -- React-Hooks
  26. Mise en œuvre du Service de rendu de formule latex par nodejs + serverless
  27. React Core - React Hooks
  28. After autumn, wear less black, white and gray, and choose more gentle "light colors"
  29. Wu Qili sent blessings on the national day. She looked haggard and thin on her own. It was worrying
  30. Grand sens de la vue à la fois, la force dure est excellente, toute la série 2.0t, le film réel 2021 haver h9!
  31. With the blessing of Toyota power, GAC motor's new gs8 is open for pre-sale, starting from 188800 yuan
  32. Test drive Xingyue L: the price is less than 200000, but there are 400000 cards. Is it inevitable to sell more than 10000 a month?
  33. Entrevue de première ligne 3 + 1 tous les jours - jour 909
  34. Entrevue de première ligne 3 + 1 par jour - jour 910
  35. Xiao Zhan's 18 word blessing copy triggered a heated discussion, and fans expressed their attitude and wished the motherland together
  36. Engineering Knowledge Card 005: comment webpack injecte - t - il les ressources JS emballées dans html?
  37. ant design vue 设置表格选择框,全选按钮选不全
  38. 五分钟掌握用Vue脚手架搭建一个完整项目!
  39. 100 questions d'entrevue Python de base partie 2 (41 - 60)
  40. 五分鐘掌握用Vue脚手架搭建一個完整項目!
  41. ant design vue 設置錶格選擇框,全選按鈕選不全
  42. Cinq minutes pour construire un projet complet avec l'échafaudage vue!
  43. La vue de conception ant définit la zone de sélection de la table, le bouton sélectionner tout n'est pas sélectionné
  44. vuex中助手函数的几种使用技巧总结
  45. La nouvelle voiture roule à grande vitesse, le tableau de bord apparaît "tasse de café" prompt, directement au magasin 4S!
  46. Résumé de plusieurs techniques d'utilisation de la fonction Helper dans vuex
  47. Un disciple féminin est venu à guozijian: Zhuo Wenyuan a été complètement noirci, et le frère aîné de sang qi a été blessé par lui!
  48. JavaScript - - quatre façons de juger les types de données
  49. HTTPS|SSL笔记-SSL分手过程(Encrypted Alert)
  50. The film arrangement rate exceeds 40%, and the box office exceeds 390 million in less than two days! Why is Changjin lake?
  51. Nouvelle grande expérience de prise de vue en direct 2022 Geely Howe
  52. Apprenez à connaître CSS - Comment organiser votre code CSS
  53. Can the Zero run C11 with less than 200000 become the leader of medium-sized pure electric SUV?
  54. Https | SSL Notes - SSL break Process (encrypted Alert)
  55. HTTPS|SSL筆記-SSL分手過程(Encrypted Alert)
  56. Récemment, j'a i été interrogé par des fans sur les génériques Java, donc j'ai regardé en arrière et j'espère que l'entrevue de mon frère cadet se passera bien.
  57. Comment utiliser la nouvelle spécification es dans votre projet
  58. JavaScript - - orienté objet
  59. South Korean actress Liu Renna, wearing a white strapless skirt and walking on the red carpet, has a hot body and attracts eyes. She smiles so sweet
  60. Nginx (3): process model