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

打印页面