CSS - mask-repeat 屬性

上一頁
下一頁

CSS 中的 mask-repeat 屬性用於定義如何在元素內重複或平鋪遮罩影像。此屬性與 mask-image 屬性一起使用，該屬性指定用作遮罩的影像。它允許水平、垂直、沿兩個軸或根本不重複影像。

語法

mask-repeat: repeat | repeat-x | repeat-y | space | round | no-repeat | initial | inherit;

屬性值

值 描述
repeat 遮罩影像將在元素內水平和垂直重複。
repeat-x 遮罩影像將在元素內水平重複。
repeat-y 遮罩影像將在元素內垂直重複。
space 遮罩影像應儘可能重複而不裁剪，任何額外的空間將平均分配在重複的影像之間。
round 遮罩影像應在元素內重複，並且重複的影像將被拉伸以適應可用空間而不被裁剪。
no-repeat 遮罩影像不會重複。
initial 它將屬性設定為其預設值。
inherit 它從父元素繼承屬性。

CSS 模式重複屬性示例

以下示例解釋了使用不同值的 mode-repeat 屬性。

使用 repeat-x 值的遮罩重複屬性

要使遮罩影像沿水平方向重複，我們使用 repeat-x 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 100px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 40%;
         mask-repeat: repeat-x;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: repeat-x
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

使用 repeat-y 值的遮罩重複屬性

要使遮罩影像沿垂直方向重複，我們使用 repeat-y 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 250px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 90%;
         mask-repeat: repeat-y;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: repeat-y
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

使用 repeat 值的遮罩重複屬性

要使遮罩影像沿水平和垂直方向重複，我們使用 repeat 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 50%;
         mask-repeat: repeat;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: repeat
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

使用 space 值的遮罩重複屬性

要允許遮罩影像儘可能重複而不裁剪，並且額外的空間平均分配在重複的影像之間，我們使用 space 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 50%;
         mask-repeat: space;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: space
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

使用 round 值的遮罩重複屬性

要使遮罩影像在元素內重複，以便它被拉伸以適應可用空間而不被裁剪，我們使用 round 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 50%;
         mask-repeat: round;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: round
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

使用 no-repeat 值的遮罩重複屬性

為了不在任何方向上重複遮罩影像，我們使用 no-repeat 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 70%;
         mask-repeat: no-repeat;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: no-repeat
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>
   
   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
mask-repeat 120 120 53 15.4 106
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告