CSS mask-image Property
Last Updated :
04 Jul, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...