CSS 属性

CSS中的CSS mask-image属性用于设置元素的遮罩图像。遮罩图像定义元素的哪些部分可见、哪些部分透明，从而允许您创建复杂的视觉效果。元素中遮罩图像透明的区域将完全透明，不透明的区域将完全可见。

属性值

  • none: 默认值。该元素没有应用蒙版图像。

  • <mask-source>: 可以通过 URL 引用或 SVG <mask> 元素访问图像。

  • <image>: 使用 image() 定义遮罩图像层。

适用范围

所有元素。在 SVG 中，它适用于不包括 <defs> 元素和所有图形元素的容器元素

语法

关键字值

mask-image: none;

<mask-source> 值

mask-image: url(bookmark.png);

<image> 值

mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(bookmark.png), skyblue);

CSS mask-image: none 

以下示例演示 -webkit-mask-image: none 属性不应用任何屏蔽效果 -

<html>
<head>
<style>
   .masking-image {
      width: 300px;
      height: 200px;
      background-color: green;

      -webkit-mask-image: url('/css/images/bookmark.png');
      mask-image:url('/css/images/bookmark.png');
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
   }
</style>
</head>
<body>
      <h2>With Mask Image</h2>
   <div class="masking-image"></div><br>
   <h2>With Mask Image Set To none Value</h2>
   <div class="masking-image" style="-webkit-mask-image:none;mask-image:none;"></div>
</body>
</html>

CSS mask-image: <mask-source>

以下示例演示了 -webkit-mask-image: url() 属性的使用，其中给定的粉色花朵图像可见仅在掩码图像定义的形状内 -

<html>
<head>
<style>
   .masking-image {
      width: 300px;
      height: 300px;

      background-image: url('/css/images/pink-flower.jpg');
      background-size:  cover;
      background-position: center;
      background-repeat: no-repeat;

      -webkit-mask-image: url('/css/images/bookmark.png');
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-image: url('/css/images/bookmark.png');
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      mask-position: center;
   }
</style>
</head>
<body>
   <div class="masking-image"></div>
</body>
</html>

CSS mask-image: <image>

以下示例演示了 -webkit-mask-image: Linear-gradient(rgba( 0, 0, 0, 1), transparent) 属性应用线性渐变作为遮罩 -

<html>
<head>
<style>
   .masking-image {
      width: 500px;
      height: 300px;

      background-image: url('/css/images/red-flower.jpg');
      background-size:  cover;
      background-position: center;
      background-repeat: no-repeat;

      -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      mask-position: center;
   }
</style>
</head>
<body>
   <div class="masking-image"></div>
</body>
</html>