Mask-Repeat is a CSS property that allows you to specify how a mask image is repeated within an element. It is used in conjunction with the mask-image property to create interesting visual effects on web pages.
The mask-repeat property can take four values: repeat, repeat-x, repeat-y, and no-repeat. The default value is repeat.
The repeat value tells the browser to repeat the mask image both horizontally and vertically to fill the entire element. Here is an example:
<div style="background-image: url('mask.png'); mask-image: url('mask.png'); mask-repeat: repeat;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, the mask image is repeated both horizontally and vertically to fill the entire div element. The text within the div is masked by the mask image.
The repeat-x value tells the browser to repeat the mask image only horizontally. Here is an example:
<div style="background-image: url('mask.png'); mask-image: url('mask.png'); mask-repeat: repeat-x;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, the mask image is repeated only horizontally to fill the entire div element. The text within the div is masked by the mask image.
The repeat-y value tells the browser to repeat the mask image only vertically. Here is an example:
<div style="background-image: url('mask.png'); mask-image: url('mask.png'); mask-repeat: repeat-y;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, the mask image is repeated only vertically to fill the entire div element. The text within the div is masked by the mask image.
The no-repeat value tells the browser to only use the mask image once and not repeat it. Here is an example:
<div style="background-image: url('mask.png'); mask-image: url('mask.png'); mask-repeat: no-repeat;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, the mask image is only used once and not repeated. The text within the div is masked by the mask image.
Mask-Repeat is a powerful CSS property that can be used to create interesting visual effects on web pages. By combining it with the mask-image property, you can create unique and visually appealing designs.