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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。