Briefly describe the mask attribute of CSS

skill 1 year ago Lao Li next door Last edited at 11:15:45 on January 30, 2023

The purpose of this article is to brush the sense of existence. After all, the previous article said that I went to Yangcun to play~~

The mask attribute of CSS allows users to hide part or all of the visible area of an element by masking or cutting the image of a specific area.

 /* Keyword values */ mask: none; /* Image values */ mask: url(mask.png); /*Use bitmaps as masks*/ mask: url(masks.svg#star); /*Use shapes in SVG graphics as masks*/ /* Combined values */ mask: url(masks.svg#star) luminance;        /* Element within SVG graphic used as luminance mask */ mask: url(masks.svg#star) 40px 20px; /*Use the shape in the SVG graphic to mask and set its position: 40px from the top edge, 20px from the left edge*/ mask: url(masks.svg#star) 0 0/50px 50px; /*Use the shape in the SVG drawing as the mask and set its position and size: 50px in length and width*/ mask: url(masks.svg#star) repeat-x;         /* Element within SVG graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box;       /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude;          /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */ /* Global values */ mask: inherit; mask: initial; mask: unset;

For example, the following picture is superimposed with a gradient from transparent to black

 Briefly describe the mask attribute of CSS Page 1

 background: url(image.png) ; mask: linear-gradient(90deg, transparent, #000);

For browser compatibility, add webkit kernel compatibility:

 background: url(image.png) ; mask: linear-gradient(90deg, transparent, #000); -webkit-mask: linear-gradient(90deg, transparent, #000);

After the mask is applied, it will become like this:

 Briefly describe the mask attribute of CSS Page 2

Conclusion: The overlapping part of the image and the gradual transparent generated by the mask will become transparent.

It is worth noting that the above gradient uses linear gradient (90deg, transparent, # 000). The # 000 solid color part here can be changed to any color without affecting the effect.

Complete code:

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>mask</title> <style> body{ padding: 0px; margin: 0px; } .mask{ background: url(1.jpg); height:100vh; background-size: cover; mask: linear-gradient(90deg, transparent, #000); -webkit-mask: linear-gradient(90deg, transparent, #000); } </style> </head> <body> <div class="mask"></div> </body> </html>

One uses chestnuts:

Every National Day, WeChat friends circle will be popular to decorate their avatars with national flags.

 Briefly describe the mask attribute of CSS Page 3

This effect can be easily achieved using the mask attribute:

 Briefly describe the mask attribute of CSS Page 4

Complete code:

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>National flag avatar</title> <style> .mask {     position: relative;     margin: auto;     width: 400px;     height: 400px;     background: url(img1.jpg) no-repeat;     background-size: cover; } .mask::after {     content: "";     position: absolute;     top: 0;     left: 0;     bottom: 0;     right: 0;     background: url(img2.jpg) no-repeat;     background-size: cover;     mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);     -webkit-mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent); } </style> </head> <body> <div class="mask"></div> </body> </html>


This article is written by@ Lao Li next door Issued on January 30, 2023 Yeluzi Blog , unless otherwise specified, all articles in this blog are original, please retain the source for reprinting.
comment (2)
 visitor
 DIYU
Learned
· From Japan · reply
 solar storm
The right navigation of the boss is good. Is it a plug-in? Is it sold in the background
· From Hefei, Anhui Province · reply
Top