The mask-image property in CSS is used to set the mask of an image or a text. It is used to form a mask layer for a particular element in CSS.
Syntax:
mask-image: none | <mask-source>
-
none: No mask layer is set and transparent black layer is set.
Syntax:
mask-image: none
Example:
In this example, no mask is created.
html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container{
background-color: green;
background-repeat: no-repeat;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.mask{
background:black;
width: 200px;
height: 200px;
-webkit-mask-image: none;
}
.mask h1{
height: 400px;
width: 400px;
}
wrap text h1
</style>
<body>
<div class="container">
<div class="mask"></div>
</div>
</body>
</html>
|
Output:
<mask-source>: Used to give the source of the image url.
Syntax:
mask-image: url();
Example :
The icon is a mask over background color which is black. It can be changed as required.
html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container{
background-color: green;
background-repeat: no-repeat;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.mask{
background:black;
width: 200px;
height: 200px;
-webkit-mask-image: url(
}
.mask h1{
height: 400px;
width: 400px;
}
wrap text h1
</style>
<body>
<div class="container">
<div class="mask"></div>
</div>
</body>
</html>
|
Output:
Browsers supported:
- Chrome 1
- Edge 79
- Firefox 53
- Opera 15
- Safari 15.4