CSS 中的 CSS mask-position 属性用于指定 mask-position 图像在元素中的位置。蒙版图像通常使用 mask-image 属性进行定义，而 mask-position 允许您控制蒙版图像在元素框中的放置位置，相对于 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;
<位置> 值
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;
CSS mask-position - 左上角值
以下示例演示了 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('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>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
<div class="container">
<div class="masking-image">
<h3>CSS mask-position: top left</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
</div>
</div>
</body>
</html>
CSS mask-position - 右上角的值
以下示例演示了 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('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>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
<div class="container">
<div class="masking-image">
<h3>CSS mask-position: top right</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
</div>
</div>
</body>
</html>
CSS mask-position - 左下角值
以下示例演示了 mask-position： bottom 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('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>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
<div class="container">
<div class="masking-image">
<h3>CSS mask-position: bottom left</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
</div>
</div>
</body>
</html>
CSS mask-position - 右下角值
以下示例演示了 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('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>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
<div class="container">
<div class="masking-image">
<h3>CSS mask-position: bottom right</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</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('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>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
<div class="container">
<div class="masking-image">
<h3>CSS mask-position: center</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
</div>
</div>
</body>
</html>
CSS mask-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('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>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
<div class="container">
<div class="masking-image">
<h3>CSS mask-position: 30% 20%;</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.
</div>
</div>
</div>
</body>
</html>
