CSS mask-repeat属性用法及代码示例

CSS mask-repeat设置蒙版图像的大小和位置后如何放置它们。遮罩图像可以沿垂直或水平或两个轴重复，也可以不重复。

用法:

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

属性值：此属性接受上面提到并在下面描述的值：

One-values:此属性值是指以空格，舍入，重复，repeat-x，repeat-y，no-repeat等单位定义的值。
Two-values:该属性值是指以重复空间，舍入空间，重复重复等单位定义的值。
Multiple values:此属性值是指使用诸如舍入舍入，no-repeat等单位定义的值。
Global values:此属性值是指使用诸如继承，初始，未设置等单位定义的值。

范例1：下面的示例使用one-values说明mask-repeat属性：

<!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>

输出：

范例2：下面的示例使用two-values说明mask-repeat属性：

<!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>

输出：

支持的浏览器：

Chrome
Firefox
Safari
Opera
Edge
Internet Explorer(不支持)。

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 CSS mask-repeat property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。