CSS Masking mask-position - 易学教程，面试笔记经验！

CSS 属性

CSS 中的 CSS mask-position 属性用于指定元素中遮罩图像的位置。遮罩图像通常使用 mask-image 属性定义，并且遮罩位置允许您控制遮罩图像在图像中的放置位置（相对于 mask-origin 属性设置的蒙版位置图层）。

属性值

top: 在元素的顶部设置遮罩图像。
bottom: 底部的遮罩图像元素的。
right: 元素右侧的遮罩图像。
left: 遮罩图像在元素的左侧。
center: 元素中心的遮罩图像。
<position> -为相对于元素框边缘的 2D 位置指定一到四个值。可以指定相对和绝对偏移。位置可以设置在元素框外。

适用范围

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

语法

关键字值

mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

<position> 值

mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

CSS mask-position: top left

以下示例演示 mask-position: top left 属性将遮罩图像定位在元素的左上角 -

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('/css/images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: top left;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: top left</h3>
         日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: top left</h3>
            日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position: top right

以下示例演示 mask-position: top right 属性将遮罩图像定位在元素的右上角 -

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block;
      border: 2px solid red; 
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('/css/images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: top right;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: top right</h3>
         日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: top right</h3>
            日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position: left left

以下示例演示 mask-position: left left 属性将遮罩图像定位在元素的左下侧 -

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('/css/images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: bottom left;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: bottom left</h3>
         日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: bottom left</h3>
            日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position: bottom right

以下示例演示了 mask-position:bottom right 属性将遮罩图像定位在元素的右下侧 -

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block;
      border: 2px solid red; 
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('/css/images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: bottom right;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: bottom right</h3>
         日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: bottom right</h3>
            日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position: center

以下示例演示 mask-position: center 属性将遮罩图像定位在元素的中心 -

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('/css/images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: center</h3>
         日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: center</h3>
            日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。   
         </div>
      </div>
   </div>
</body>
</html>

CSS mask-position: <position>

下面的例子演示了 mask-position: 30% 20%;属性将遮罩图像定位在距离元素左边缘 30% 和上边缘 20% 处 -

<html>
<head>
<style>
   .main {
      display: flex;
      flex-direction: row;
   }
   .box {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      margin-right: 10px;
   }
   .container {
      display: inline-block; 
      border: 2px solid red;
   }
   .masking-image {
      width: 280px;
      height: 250px;
      background: linear-gradient(135deg, yellow 10%, orange 100%);
      -webkit-mask-image: url('/css/images/book.png');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 50%;
      -webkit-mask-position: 30% 20%;
   }
</style>
</head>
<body>
   <div class="main">
      <div class="box">
         <h3>CSS mask-position: 30% 20%;</h3>
         日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
      </div>

      <div class="container">
         <div class="masking-image"> 
            <h3>CSS mask-position: 30% 20%;</h3>
            日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。   
         </div>
      </div>
   </div>
</body>
</html>