CSS Masking - mask-origin 属性_CSS 菜鸟教程

CSS mask-origin 属性定义了蒙版图像的原点。

此属性为显示为单个框的元素提供蒙版定位区域，这意味着它指定由CSS mask-image 属性确定的图像的原点位置。

对于显示为多个框的元素（例如，多行上的内联框或跨多个页面的框），mask-origin 属性指定哪些框受 box-decoration-break 影响，以确定蒙版定位区域。

可能的值

content-box - 设置相对于内容框外边缘的蒙版图像的原点。
padding-box - 设置相对于填充框外边缘的蒙版图像的原点。
border-box - 设置相对于边框外边缘的蒙版图像的原点。
fill-box - 设置相对于对象边界框的蒙版图像的原点。
stroke-box - 设置相对于描边边界框的蒙版图像的原点。
view-box − 最近的SVG视口被视为参考框。具有 viewBox 属性的 SVG 元素的内容放置在 viewBox 定义的坐标系的原点，引用框的大小或尺寸设置为 viewBox 属性中指定的宽度和高度。

适用于

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

语法

	mask-origin: content-box;
	mask-origin: padding-box;
	mask-origin: border-box;
	mask-origin: fill-box;
	mask-origin: stroke-box;
	mask-origin: view-box;

CSS mask-origin - 内容框

以下示例演示了 -webkit-mask-origin： content-box 属性将掩码图像的原点与元素的内容框设置为 -

<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 280px;
	 	 	 border: 3px solid blue;
	 	}
	 	.mask-container {
	 	 	 background-color: gold;
	 	 	 display: block;
	 	 	 padding: 20px;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 border: 20px solid red;
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-position: top left;
	 	 	 -webkit-mask-repeat: repeat;
	 	 	 -webkit-mask-size: 70px 70px;
	 	 	 -webkit-mask-origin: content-box;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="mask-container">
	 	 	 	 	<img src="images/pink-flower.jpg" alt="pink flower" width="100%">
	 	 	 </div>
	 	</div>
</body>
</html>

CSS mask-origin - 填充框

以下示例演示了 -webkit-mask-origin： padding-box 属性将掩码图像的原点与元素的填充框设置为 −

<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 280px;
	 	 	 border: 3px solid blue;
	 	}
	 	.mask-container {
	 	 	 background-color: gold;
	 	 	 display: block;
	 	 	 padding: 20px;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 border: 20px solid red;
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-position: top left;
	 	 	 -webkit-mask-repeat: repeat;
	 	 	 -webkit-mask-size: 70px 70px;
	 	 	 -webkit-mask-origin: padding-box;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="mask-container">
	 	 	 	 	<img src="images/pink-flower.jpg" alt="pink flower" width="100%">
	 	 	 </div>
	 	</div>
</body>
</html>

CSS mask-origin - 边框框

以下示例演示了 -webkit-mask-origin： border-box 属性将掩码图像的原点与元素的边框框设置为 -

<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 280px;
	 	 	 border: 3px solid blue;
	 	}
	 	.mask-container {
	 	 	 background-color: gold;
	 	 	 display: block;
	 	 	 padding: 20px;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 border: 20px solid red;
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-position: top left;
	 	 	 -webkit-mask-repeat: repeat;
	 	 	 -webkit-mask-size: 70px 70px;
	 	 	 -webkit-mask-origin: border-box;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="mask-container">
	 	 	 	 	<img src="images/pink-flower.jpg" alt="pink flower" width="100%">
	 	 	 </div>
	 	</div>
</body>
</html>

CSS mask-origin - 填充框

以下示例演示了 -webkit-mask-origin： fill-box 属性设置掩码图像相对于整个框的原点，包括任何填充 -

<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 240px;
	 	 	 border: 3px solid blue;
	 	}
	 	.mask-container {
	 	 	 background-color: gold;
	 	 	 display: block;
	 	 	 padding: 20px;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-position: top left;
	 	 	 -webkit-mask-repeat: repeat;
	 	 	 -webkit-mask-size: 70px 70px;
	 	 	 -webkit-mask-origin: fill-box;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="mask-container">
	 	 	 	 	<img src="images/pink-flower.jpg" alt="pink flower" width="100%">
	 	 	 </div>
	 	</div>
</body>
</html>

CSS mask-origin - 描边框

以下示例演示了 -webkit-mask-origin： stroke-box 属性设置相对于笔划边界框的蒙版图像的原点，包括任何填充和边框 -

<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 280px;
	 	 	 border: 3px solid blue;
	 	}
	 	.mask-container {
	 	 	 background-color: gold;
	 	 	 display: block;
	 	 	 padding: 20px;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 border: 20px solid red;
	 	 		
	 	 	 -webkit-mask-image: url(images/heart.png);
	 	 	 -webkit-mask-position: top left;
	 	 	 -webkit-mask-repeat: repeat;
	 	 	 -webkit-mask-size: 70px 70px;
	 	 	 -webkit-mask-origin: stroke-box;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="mask-container">
	 	 	 	 	<img src="images/pink-flower.jpg" alt="pink flower" width="100%">
	 	 	 </div>
	 	</div>
</body>
</html>

<< CSS Masking - mask-mode 属性 CSS - min-height 属性 >>