CSS mask-origin 属性定义遮罩图像的原点。
该属性为显示为单个框的元素提供遮罩定位区域，这意味着它指定了所确定的图像的原点位置通过 mask-image CSS 属性。
对于显示为多个框的元素（例如，多行上的行内框）或跨越多个页面的框），mask-origin 属性指定哪些框受 box-decoration-break 影响，以确定遮罩定位区域。
属性值
content-box: 设置遮罩图像相对于内容框外边缘的原点。
padding-box: 设置遮罩图像的原点相对于填充框外边缘的遮罩图像。
border-box: 设置遮罩图像相对于边框框外边缘的原点。
fill-box: 设置遮罩图像相对于对象边界框的原点。
lines-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: content-box
以下内容示例演示了 -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(/css/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="/css/images/pink-flower.jpg" alt="pink flower" width="100%">
</div>
</div>
</body>
</html> CSS mask-origin: padding-box
以下示例演示了 -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(/css/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="/css/images/pink-flower.jpg" alt="pink flower" width="100%">
</div>
</div>
</body>
</html> CSS mask-origin: border- box
下面的示例演示了 -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(/css/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="/css/images/pink-flower.jpg" alt="pink flower" width="100%">
</div>
</div>
</body>
</html> CSS mask -origin: fill-box
以下示例演示了 -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(/css/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="/css/images/pink-flower.jpg" alt="pink flower" width="100%">
</div>
</div>
</body>
</html> CSS mask-origin: stroke-box
以下示例演示 -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(/css/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="/css/images/pink-flower.jpg" alt="pink flower" width="100%">
</div>
</div>
</body>
</html>