CSS - mask-composite 屬性

CSS mask-composite 屬性定義瞭如何將遮罩影像與其他遮罩層影像合成。它指定了遮罩層如何相互互動，尤其是在使用多個遮罩層時。

語法

mask-composite: add | subtract | intersect | exclude | initial | inherit;

屬性值

值	描述
add	透過將頂部遮罩放置在底部遮罩上方來組合遮罩層。預設值。
subtract	從底部遮罩中移除頂部遮罩的部分，使頂部遮罩存在的地方變得更加透明。
intersect	僅顯示兩個遮罩重疊的區域。
exclude	隱藏遮罩重疊的區域，僅顯示遮罩不重疊的部分。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS Mask Composite 屬性示例

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

使用 Add 值的 Mask Composite 屬性

要組合不同的遮罩影像，以便將頂部遮罩影像新增到底部遮罩影像，我們使用add 值。任何被任一遮罩覆蓋的區域都將可見。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: add;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: add
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

使用 Subtract 值的 Mask Composite 屬性

要組合不同的遮罩影像，以便從底部遮罩中移除頂部遮罩的部分，我們使用subtract 值。它使頂部遮罩存在的地方變得更加透明。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: subtract;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: subtract
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

使用 Intersect 值的 Mask Composite 屬性

要組合不同的遮罩影像，以便僅突出顯示兩個遮罩重疊的區域，我們使用intersect 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: intersect;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: intersect
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

使用 Exclude 值的 Mask Composite 屬性

要組合不同的遮罩影像，以便隱藏遮罩重疊的區域，並僅顯示遮罩不重疊的部分，我們使用exclude 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: gray;
         -webkit-mask-image: url(/css/images/book.png), 
                              url(/css/images/heart.png);
         mask-image: url(/css/images/book.png), 
                     url(/css/images/heart.png);
         -webkit-mask-repeat: no-repeat, no-repeat;
         mask-repeat: no-repeat, no-repeat;
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         -webkit-mask-composite: add;
         mask-composite: exclude;
      }

      .items {
         display: flex;
         gap: 30px
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-composite property
   </h2>
   <h4>
      mask-composite: exclude
   </h4>
   <div class="box"></div>
   <h4>
      Images used:
   </h4>
   <div class="items">
      <img src="/css/images/book.png" 
      height=50 width=50>
      <img src="/css/images/heart.png" 
      height=50 width=50>
   </div>
</body>

</html>

支援的瀏覽器

屬性
mask-composite	120	120	53	15.4	106

css_properties_reference.htm

列印頁面