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

CSS 中的 CSS mask-size 属性用于指定使用 mask-image 应用于元素的遮罩图像的大小。它允许您控制遮罩的尺寸，确定其在元素内的缩放或显示方式。

如果您应用 mask 设置 mask-size 属性后，将 mask-size 属性设置为元素的简写属性，mask-size 属性将重置为其默认值。

属性值

contain: 将图像大小调整为最大尺寸，同时保持原始纵横比，而不会被拉伸或挤压。
cover: 该值与 contains 相反。将图像缩放到最大尺寸，同时保持纵横比，确保图像不会被压扁。当图像和容器具有不同尺寸时，图像会在左/右或上/下侧被剪切。
<length>: <length> 值将遮罩图像调整为指定的值方面。不允许使用负长度。
<percentage>: <percentage> 值根据掩模定位区域的指定百分比（由掩模原点确定）调整相对于尺寸的掩模图像财产。不允许使用负百分比。
auto: 自动值在水平和垂直方向上按比例调整遮罩图像大小，同时保持其固有比例。

适用范围

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

语法

mask-size: cover |contain | <length> | <percentage> | auto;

遮罩图像的渲染大小计算如下:

如果给定了两个蒙版大小组件且不是自动的: 蒙版图像将以所需的大小显示。
当遮罩尺寸设置为 cover 或 contains 时: 显示图像，同时在遮罩定位区域内的最大尺寸下保留其固有比例。当图像中没有固有比例时，将按照遮罩定位区域的尺寸显示。
如果遮罩大小设置为 auto 或 auto auto: 如果图像具有内在维度，它是在这些维度上渲染的；否则，它与掩模定位区域对齐。如果图像没有尺寸但有比例，则将其渲染为已使用"包含"。如果图像具有一个固有尺寸和比例，则使用该尺寸和指定的比例进行渲染。图像具有单一固有尺寸，未定义比例，并且与遮罩定位区域对齐。
如果遮罩大小包含一个自动组件和一个非自动组件: 对于具有内在比例的图像，使用指定的维度进行渲染，并根据内在比例计算其他维度。如果图像中没有固有比例，则使用给定尺寸作为该尺寸。对于其他尺寸，请使用图像的固有尺寸（如果可用）。如果没有可用的固有尺寸，则使用掩模定位区域的相应尺寸。

CSS mask-size: contains

以下示例演示了使用 -webkit-mask-size: contains 属性，其中遮罩图像适合容器，同时保持其纵横比 -

<html>
<head>
<style>
   .mask-image-contain {
      width: 200px;
      height: 150px;
      background-image: url(/css/images/pink-flower.jpg);
      background-size: contain;
      -webkit-mask-image: url(/css/images/heart.png);
      -webkit-mask-size: contain;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="/css/images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: contain</h2>
   <div class="mask-image-contain"></div>
</body>
</html>

CSS mask-size: cover

以下示例演示 -webkit-mask-size: cover 属性的使用，该属性确保遮罩图像完全覆盖背景 -

<html>
<head>
<style>
   .mask-image-cover {
      width: 200px;
      height: 200px;
      background-image: url(/css/images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(/css/images/heart.png);
      -webkit-mask-size: cover;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="/css/images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: cover</h2>
   <div class="mask-image-cover"></div>
</body>
</html>

CSS mask-size: <length>

以下示例演示 -webkit-mask-size: 100px 100px 属性使用长度值设置遮罩图像的大小。遮罩图像将重复以覆盖整个背景 -

<html>
<head>
<style>
   .mask-image-length {
      width: 200px;
      height: 200px;
      background-image: url(/css/images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(/css/images/heart.png);
      -webkit-mask-size: 100px 100px;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="/css/images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: 100px 100px</h2>
   <div class="mask-image-length"></div>
</body>
</html>

CSS mask-size: <percentage>

以下示例演示 -webkit-mask-size: 100% 100%属性设置遮罩图像的大小以覆盖元素的整个大小 -

<html>
<head>
<style>
   .mask-image-length {
      width: 200px;
      height: 200px;
      background-image: url(/css/images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(/css/images/heart.png);
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="/css/images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: 100% 100%</h2>
   <div class="mask-image-length"></div>
</body>
</html>

CSS mask-size: auto

以下示例演示了 -webkit-mask-size:auto 属性将自动调整遮罩图像的大小以适合元素 -

<html>
<head>
<style>
   .mask-image-auto {
      width: 200px;
      height: 200px;
      background-image: url(/css/images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: url(/css/images/heart.png);
      -webkit-mask-size: auto;
   }
</style>
</head>
<body>
   <h2>Orignal Image</h2>
   <img src="/css/images/pink-flower.jpg" width="200px" height="200px">
   <h2>mask-size: auto</h2>
   <div class="mask-image-auto"></div>
</body>
</html>