CSS - mask-size 属性

CSS 中的mask-size属性用于指定应用于元素的遮罩图像的大小，该遮罩图像使用mask-image属性应用。它允许您控制遮罩的尺寸，确定它如何在元素内缩放或显示。

语法

mask-size: auto | size | contain | cover | initial | inherit;

属性值

值	描述
auto	auto 值在水平和垂直方向上按比例调整遮罩图像大小，同时保持其固有比例。
length	length 值将遮罩图像调整为指定的尺寸。不允许使用负长度。
percentage	百分比值根据mask-origin属性定义的遮罩定位区域的百分比调整遮罩图像大小。不允许使用负百分比。
contain	它将图像调整为最大尺寸，同时保持原始纵横比，不会拉伸或压缩。
cover	此值将图像缩放至其最大尺寸，同时保留纵横比，如果尺寸与容器不同，则必要时将其裁剪。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS Mask Size 属性示例

以下示例说明了使用不同值的mask-size属性。

使用 Contain 值的 Mask Size 属性

要将遮罩图像缩放以适合元素的尺寸，同时保留图像的纵横比，我们使用contain值。整个图像将可见，但在元素边缘周围可能会有空白区域。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: contain;
         mask-repeat: no-repeat;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: contain
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="300">
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

使用 Cover 值的 Mask Size 属性

要将遮罩图像缩放以覆盖元素的整个区域，确保图像完全覆盖元素而不进行拉伸，但可能会裁剪图像，我们使用cover值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: cover;
         mask-repeat: no-repeat;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: cover
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="400">
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

使用 Length 值的 Mask Size 属性

要设置遮罩图像的大小，我们可以使用长度单位（例如 px、em、rem 等）指定大小。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-repeat: no-repeat;
      }
      
      .ex1 {
         mask-size: 350px;
      }

      .ex2 {
         mask-size: 500px;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: 350px
   </h4>
   <div class="container ex1">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="200">
   </div>
   <h4>
      mask-size: 500px
   </h4>
   <div class="container ex2">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="200">
   </div>
   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

使用 Percentage 值的 Mask Size 属性

要设置遮罩图像的大小，我们可以使用百分比值（例如 10%）相对于包含元素的大小指定大小。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-repeat: no-repeat;
      }
      
      .ex1 {
         mask-size: 50%;
      }

      .ex2 {
         mask-size: 38%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: 50%
   </h4>
   <div class="container ex1">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="100">
   </div>
   <h4>
      mask-size: 38%
   </h4>
   <div class="container ex2">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="500" height="100">
   </div>
   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

使用 Auto 值的 Mask Size 属性

要让遮罩图像以其原始尺寸显示，没有任何固有缩放，我们使用auto值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: auto;
         mask-repeat: no-repeat;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-size Property
   </h2>
   <h4>
      mask-size: auto
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width="400" height="100">
   </div>
   <h4>
      image used:
   </h4>
   <img src="/css/images/scenery.jpg" 
   alt="img" width="200" height="150">

</body>

</html>

支持的浏览器

属性
mask-size	120	120	53	15.4	106

css_properties_reference.htm

打印页面