CSS - mask 屬性

CSS 的mask 屬性用於在特定位置遮罩並顯示影像，以部分或完全隱藏元素。此屬性是以下 CSS 屬性的簡寫：mask-clip、mask-composite、mask-image、mask-mode、mask-origin、mask-position、mask-repeat 和 mask-size

語法

mask: <mask-image> <mask-mode> <mask-composite> <mask-clip> <mask-origin> <mask-position> <mask-repeat> <mask-size> | initial | inherit;

屬性值

值	描述
mask-image	指定元素遮罩層的影像。預設值為 none。
mask-mode	指定遮罩層影像應為亮度遮罩還是 Alpha 遮罩。預設值為 match-source。
mask-composite	指定用於當前遮罩層與下方遮罩層的合成操作。預設值為 add。
mask-clip	指定受遮罩影像影響的區域。預設值為 border-box。
mask-origin	指定遮罩層影像的原點位置。預設值為 border-box。
mask-position	設定遮罩影像相對於遮罩位置區域的起始位置。預設值為 0% 0%。
mask-repeat	指定遮罩影像的重複方式。預設值為 repeat。
mask-size	指定遮罩層影像的大小。預設值為 auto。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS Mask 屬性示例

以下示例說明了使用不同值的mask 屬性。

使用 Mask 屬性定義多個值

mask 屬性是八個屬性的簡寫屬性。某些屬性是可選的，可能不需要。在以下示例中，定義了五個屬性的值，即：mask-image、mask-mode、mask-repeat、mask-position 和 mask-size。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked {
         height: 200px;
         mask: url('/css/images/logo.png') 
               no-repeat no-repeat 45% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask:
   </h4>
   <div class="masked">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=300 width=500>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Mask 屬性的組成屬性

mask 屬性是八個屬性的簡寫屬性。這八個屬性可以單獨使用以產生與mask 屬性產生的相同效果。以下示例中單獨使用了某些屬性，以顯示與上述示例相同的效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked {
         height: 200px;
         mask-image: url('/css/images/logo.png');
         mask-mode: no-repeat;
         mask-repeat: no-repeat;
         mask-position: 45%;
         mask-size: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask-image: url("logo")
   </h4>
   <h4>
      mask-mode: no-repeat
   </h4>
   <h4>
      mask-repeat: no-repeat
   </h4>
   <h4>
      mask-position: 45%
   </h4>
   <h4>
      mask-size: 50%
   </h4>
   <div class="masked">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=300 width=500>
   </div>
   <h4>image used:</h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Mask 屬性與漸變

mask 屬性可以與漸變一起使用以產生視覺效果。在以下示例中，使用了linear-gradient 和 radial-gradient。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked1 {
         mask: linear-gradient(to right bottom, black, transparent);
      }

      .masked2 {
         mask: radial-gradient(circle, black 35%, rgba(0, 0, 0, 0.5) 60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask: linear-gradient 
      (to right bottom, black, transparent)
   </h4>
   <div class="masked1">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      mask: radial-gradient
      (circle, black 35%, rgba(0, 0, 0, 0.5) 60%)
   </h4>
   <div class="masked2">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

支援的瀏覽器

屬性
mask	120	120	53	15.4	106

css_properties_reference.htm

列印頁面