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

列印頁面