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

打印页面