The CSS mask-image Property
Placing a mask layer over an element is how CSS masking hides some or all of that element.
You choose the layer's image with the mask-image property, and PNG and SVG images both work, as do CSS gradients and the SVG <mask> element.
Use a PNG Image as the Mask Layer
A url() value is how a PNG image gets passed in as the mask layer.
Such an image must contain an area that is transparent or semi-transparent. Transparency hides the element, whereas opaque pixels, even black ones, leave it visible.
Two properties work together here. mask-image names the image that masks the element, and mask-repeat decides if or how that image repeats, with no-repeat showing it a single time.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - PNG</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>CSS Mask Image - PNG</h1>
<p>The mask-image property specifies the image to be used as a mask layer for an element.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Repeat the Mask Layer Image
Drop the mask-repeat property and the mask image tiles across the entire image.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - Repeat</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}
</style>
</head>
<body>
<h1>CSS Mask Image - Repeat</h1>
<p>If we omit the mask-repeat property, the mask image will be repeated all over the image.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Position the Mask Layer Image
A mask image starts out at the top-left corner of its element, repeated in both directions. To start it somewhere else, use mask-position, whose value is relative to the mask position area.
Example
Here the mask layer image sits in the center:
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - Position</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
</style>
</head>
<body>
<h1>CSS Mask Image - Position</h1>
<p>The mask-position property sets the starting position of a mask image.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>