CSS Masking - mask-size 属性

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

如果在设置 mask-size 属性后将 mask 速记属性应用于元素，则 mask-size 属性将重置为其默认值。

可能的值

contain - 将图像调整为最大大小，同时保持原始纵横比而不会被拉伸或挤压。
cover − 此值与 contain 相反。将图像缩放到其最大大小，同时保持纵横比，确保图像不会被挤压。当图像和容器的尺寸不同时，图像将在左侧/右侧或顶部/底部进行剪裁。
<length> - <length>值将蒙版图像调整到指定尺寸。不允许使用负长度。
<percentage> − <percentage>值根据掩码定位区域的指定百分比（由 mask-origin 属性确定）调整掩模图像相对于尺寸的尺寸。不允许使用负百分比。
auto − auto 值在水平和垂直方向上按比例调整蒙版图像大小，同时保持其固有比例。

适用于

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

语法


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

蒙版图像的渲染大小计算如下：

如果两个蒙版大小的组件都给定并且不是自动的 - 蒙版图像将以所需的大小显示。
当蒙版大小设置为覆盖或包含时 - 在蒙版定位区域内的最大尺寸下保持其固有比例的同时显示图像。当图像中没有固有比例时，它显示在掩模定位区域的尺寸上。
如果 mask-size 设置为 auto 或 auto auto - 如果图像具有固有尺寸，则以这些尺寸呈现;否则，它将与面罩定位区域对齐。如果图像没有尺寸，只有比例，则会呈现为已使用“包含”。如果图像具有一个固有尺寸和一个比例，则使用该尺寸和指定比例进行渲染。图像具有单个固有尺寸，未定义比例，并且它与蒙版定位区域对齐。
如果 mask-size 包含一个 auto 组件和一个非 auto 组件 - 对于具有固有比例的图像，使用指定的维度进行渲染，并根据固有比例计算另一个维度。如果图像中没有固有比例，请为该维度使用给定的维度。对于另一个维度，请使用图像的固有维度（如果可用）。如果没有可用的固有尺寸，请使用掩模定位区域的相应尺寸。

CSS mask-size - contain

以下示例演示了 -webkit-mask-size： contain 属性的使用，其中掩码图像适合容器，同时保持其纵横比 -


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

CSS mask-size - <长度>

以下示例演示了 -webkit-mask-size： 100px 100px 属性使用长度值设置掩码图像的大小。蒙版图像将重复以覆盖整个背景 -


<html>
<head>
<style>
	 	.mask-image-length {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-image: url(images/pink-flower.jpg);
	 	 	 background-size: cover;
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-size: 100px 100px;
	 	}
</style>
</head>
<body>
	 	<h2>Orignal Image</h2>
	 	<img src="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 - <百分比>

以下示例演示了 -webkit-mask-size： 100% 100% 属性设置掩码图像的大小以覆盖元素的整个大小 -


<html>
<head>
<style>
	 	.mask-image-length {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-image: url(images/pink-flower.jpg);
	 	 	 background-size: cover;
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	}
</style>
</head>
<body>
	 	<h2>Orignal Image</h2>
	 	<img src="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 - 自动值

以下示例演示了 -webkit-mask-size： auto 属性如何自动调整掩码图像的大小以适应元素 -


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

打印本页