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

列印頁面