CSS mask-size property

CSS mask-repeat property

Last Updated : 08 Jun, 2023

CSS mask-repeat sets how the mask images are placed after they have been sized and positioned. The mask image can be repeated along the vertical or horizontal or both axes or not repeated.

Syntax:

mask-repeat: One-values
/* Or */
mask-repeat: Two-values
/* Or */
mask-repeat: Multiple values
/* Or */
mask-repeat: Global values

Property values: This property accepts values mentioned above and described below:

One-values: This property value refers to the values defined with units like space, round, repeat, repeat-x, repeat-y, no-repeat, etc.
Two-values: This property value refers to the values defined with units like repeat space, round space, repeat , etc.
Multiple values: This property value refers to the values defined with units like space round, no-repeat, etc.
Global values: This property value refers to the values defined with units like inherit, initial, unset, etc.

Example 1: Below example illustrates the mask-repeat property using one-values:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 40%;
            height: 80px;
            background: green;
            -webkit-mask-image:
                url("image.svg");
            mask-repeat: repeat-x;
        }
    </style>
</head>
 
<body>
    <div class="geeks"></div>
</body>
</html>

Output:

Example 2: Below example illustrates the mask-repeat property using two-values:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 40%;
            height: 80px;
            background: green;
            -webkit-mask-image:
                url("image.svg");
            mask-repeat: space repeat;
        }
    </style>
</head>
 
<body>
 
    <div class="geeks"></div>
 
</body>
</html>

Output:

Browsers Supported:

Chrome 1
Firefox 53
Safari 15.4
Opera 15
Edge 79
Internet Explorer (Not Supported).

CSS mask-size property

T

thacker_shahid

News

Improve

Article Tags :

Similar Reads

CSS mask-repeat property

CSS mask-repeat sets how the mask images are placed after they have been sized and positioned. The mask image can be repeated along the vertical or horizontal or both axes or not repeated. Syntax: mask-repeat: One-values /* Or */ mask-repeat: Two-values /* Or */ mask-repeat: Multiple values /* Or */

CSS mask-size property

CSS mask-size property sets the size of the mask image on the mask painting area. The mask-size property in CSS is used to specify the size of the mask image applied to an element using CSS masking. It determines the width and height of the mask image, allowing for precise control over its dimension

CSS border-image-repeat Property

The border-image-repeat property in CSS is used to scale and tiling the border images. It can be used to match the middle part of the border image to the size of the border. It can have either one or two values. One is for the horizontal and one for the vertical axis. Only one value is given then it

CSS Masking Property

CSS Masking property is used to set the mask of an image. It creates a mask layer for the specified elements in CSS. The table below shows CSS masking properties along with syntax and their description. With CSS masking, you can use a mask to cover parts of an element and make them partially or comp

CSS mask-clip property

The mask-clip CSS property specifies the area which is affected by the mask. Syntax: mask-clip: geometry-box values /* Or */ mask-clip: Keyword values /* Or */ mask-clip: Non-standard keyword values /* Or */ mask-clip: Multiple values /* Or */ mask-clip: Global values Property values: This property

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 a transparent black layer is set. Syntax: mask-image: noneExample: In this examp

CSS mask-origin property

The CSS mask-origin property determines the positioning reference of a CSS mask image applied to an element using mask-image. It defines where the mask image originates within the element's box model, influencing how the mask is positioned and clipped. Syntax: mask-origin: Keyword values /* Or */ ma

CSS background-repeat Property

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not. Syntax: background-repeat: repeat|repeat-x|round|space|repeat-y|no-repeat|initial| inherit; Default Value: Its default

CSS mask-position property

The mask-position property sets the mask images within the mask positioning area by using the percentage or keywords values. There are always two values of mask-position (horizontal offset and vertical offset). If only one value is specified then the other one is assumed to be 50% or center. Syntax:

CSS list-style Property

The list-style property in CSS is used to set the list style. the CSS list-style property is a shorthand for setting the list-style-type, list-style-position, and list-style-image properties in one declaration. It defines the appearance of list item markers, including their type (e.g., disc, circle)

翻译：