Briefly describe the mask attribute of CSS

skill • 2 years ago • Lao Li next door Last edited at 11:15:45 on January 30, 2023

Article summary

AI is generating summary

The mask attribute of CSS allows you to hide part or all of an element by masking or trimming the image area. It supports multiple values, such as url, luminance, and global values, such as inherit and initial. Through the mask attribute, you can easily realize the picture and gradient transparency effect, and improve the flexibility of web page design.

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 graph 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 shapes in SVG graphics to 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>

appreciate

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.