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
打印页面
上一页
下一页
广告