CSS Masking - mask-position 属性

上一页
下一页

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>
本页
上一页
下一页