CSS mask-image Property
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( "https://image.flaticon.com/icons/svg/942/942195.svg"); } .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
Contact Us