CSS - mask-image 属性

CSS mask-image 属性用于定义用作元素遮罩的图像或渐变。遮罩根据遮罩的不透明度或颜色值确定元素的哪些部分可见，哪些部分隐藏。

语法

mask-image: none | image | url | initial | inherit;

属性值

值	描述
none	不对元素应用任何遮罩。默认值。
image	用作遮罩层的图像。
url	指定图像或 SVG <mask> 元素的 URL。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS Mask Image 属性示例

以下示例说明了使用不同值的 mask-image 属性。

使用 None 值的 Mask Image 属性

为了不对元素产生任何遮罩效果，我们使用 none 值。这在下面的示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked-element {
         mask-image: none;
      }
   </style>
</head>

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

</html>

使用 Image 值的 Mask Image 属性

要将图像用作另一个图像上的遮罩层，我们将指定用作遮罩的图像的 url 到 mask-image 属性。根据遮罩图像中存在的形状，将显示底层图像的部分。这在下面的示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked-element {
         mask-image: url("/css/images/logo.png");
         mask-repeat: no-repeat;
         mask-position: 15%;
         mask-size: 55%
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-image property
   </h2>
   <h4>
      mask-image: url("logo")
   </h4>
   <div class="masked-element">
      <img src="/css/images/scenery.jpg" 
      alt="img" height=300 width=470>
   </div>
   <h4>
      image-used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="img" height=150 width=250>
</body>

</html>

使用 SVG 值的 Mask Image 属性

要使用自定义形状作为另一个图像上的遮罩层，我们可以使用 SVG。我们可以创建一个具有自定义尺寸的“id”的遮罩，并在要应用遮罩的图像上使用该“id”。这在下面的示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
</head>

<body>
   <h2>
   CSS mask-image property
   </h2>
   <h4>
   SVG mask is used here.
   </h4>
   <svg width="500" height="300">
      <mask id="pentagon">
      <polygon fill="#ffffff" 
        points="300,80 470,200 410,290 190,290 130,200"></polygon>
      </mask>
      <image  width="500" height="300" 
        xlink:href="/css/images/scenery.jpg" mask="url(#pentagon)">
      </image>
   </svg>
   <h3>
      image used:
   </h3>
      <img src="/css/images/scenery.jpg" 
      alt="Cinque Terre" width="300" height="200">

</body>

</html>

使用渐变的 Mask Image 属性

渐变 linear-gradient 和 radial-gradient 也可用于作为其他图像上的遮罩。这些可以用于视觉效果。这些在下面的示例中使用。

示例

<!DOCTYPE html>
<html>

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

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

<body>
   <h2>
      CSS mask-image property
   </h2>
   <h4>
      mask-image: 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-image: radial-gradient
      (ellipse, 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-image	120	120	53	15.4	15

css_properties_reference.htm

打印页面