/* 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;
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:
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:
This effect can be easily achieved using the mask attribute:
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>