CSS - mask-position 屬性

CSS mask-position 屬性用於指定元素內遮罩影像的位置。遮罩影像通常使用 mask-image 屬性定義，而 mask-position 允許您控制遮罩影像在元素框內的放置位置，相對於由 mask-origin 屬性設定的遮罩位置層。

語法

mask-position: top | right | bottom | left | center | length | percentage | initial | inherit;

屬性值

值	描述
左上左中左下右上右中右下中上中央中下	遮罩的位置使用以下關鍵字設定：left、right、top、bottom、center。如果只提供一個值，則另一個值為 center。
長度 (xpos, ypos)	第一個值設定水平距離，第二個值設定垂直距離。左上角為 0 0。可以使用任何長度單位（例如 px、em、rem 等）。如果只提供一個值，則另一個值為 50%。
百分比 (x%, y%)	第一個值設定水平距離，第二個值設定垂直距離。左上角為 0% 0%，右下角為 100% 100%。如果只提供一個值，則另一個值為 50%。預設值：0% 0%
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Mask Position 屬性示例

以下示例說明了使用不同值的 mask-position 屬性。

使用關鍵字值的 Mask Position 屬性

要設定遮罩的位置，我們可以使用關鍵字值：left、right、top、center 和 bottom。最多接受兩個值。如果指定了兩個值，則第一個值設定水平距離，第二個值設定垂直距離。如果只給出一個值，則另一個值取為 center。以下示例中顯示了這些內容。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 400px;
         width: 450px;
      }

      .mask {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: 50%;
         mask-repeat: no-repeat;

      }

      .ex1 {
         mask-position: left center;
      }

      .ex2 {
         mask-position: center;
      }

      .ex3 {
         mask-position: right top;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-position Property
   </h2>
   <h4>
      mask-position: left center (two values- define x 
      position and y position repectively)
   </h4>
   <div class="container">
      <div class="mask ex1">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: center (single value, the 
      second value is also center)
   </h4>
   <div class="container">
      <div class="mask ex2">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: right top (two values- define x 
      position and y position repectively)
   </h4>
   <div class="container">
      <div class="mask ex3">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>

</body>

</html>

使用長度值的 Mask Position 屬性

要設定遮罩的位置，我們可以使用長度單位（例如 px、em、rem 等）指定位置。最多接受兩個值。如果指定了兩個值，則第一個值設定水平距離，第二個值設定垂直距離。如果只給出一個值，則另一個值取為 50%。以下示例中顯示了這些內容。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 400px;
         width: 450px;
      }

      .mask {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: 50%;
         mask-repeat: no-repeat;

      }

      .ex1 {
         mask-position: 70px 90px;
      }

      .ex2 {
         mask-position: 7em 14em;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-position Property
   </h2>
   <h4>
      mask-position: 70px 90px (70px from left 
      edge and 90px from top edge)
   </h4>
   <div class="container">
      <div class="mask ex1">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: 7em 14em (7em from the left 
      edge and 14em from top edge)
   </h4>
   <div class="container">
      <div class="mask ex2">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>

</body>

</html>

使用百分比值的 Mask Position 屬性

要設定遮罩的位置，我們可以使用相對於容器大小的百分比值（例如 10%）指定位置。最多接受兩個值。如果指定了兩個值，則第一個值設定水平距離，第二個值設定垂直距離。如果只給出一個值，則另一個值取為 50%。以下示例中顯示了這些內容。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 400px;
         width: 450px;
      }

      .mask {
         -webkit-mask-image: url(/css/images/logo.png);
         mask-image: url(/css/images/logo.png);
         mask-size: 50%;
         mask-repeat: no-repeat;

      }

      .ex1 {
         mask-position: 70% 30%;
      }

      .ex2 {
         mask-position: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-position Property
   </h2>
   <h4>
      mask-position: 70% 30% (70% from left edge and 30% from 
      the top edge relative to the container height and width)
   </h4>
   <div class="container">
      <div class="mask ex1">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>
   <h4>
      mask-position: 50% ( second value is also 50%, 50% from
      the left edge and 50% from the top edge relative to the 
      container height and width)
   </h4>
   <div class="container">
      <div class="mask ex2">
         <img src="/css/images/scenery.jpg" 
         alt="img" width="600" height="400">
      </div>
   </div>

</body>

</html>

支援的瀏覽器

屬性
mask-position	120	120	53	15.4	106

css_properties_reference.htm

列印頁面