CSS - Mask（掩码）属性_CSS 菜鸟教程

CSS mask 是一种简写属性，用于遮罩并在特定位置显示图像，以部分或完全隐藏元素。

此属性是以下 CSS 属性的简写：

可能的值

none − 此值将消除屏蔽效果。
<mask-reference> - 设置蒙版的图像源。请参阅 mask-image。
<masking-mode> - 确定是否应将 alpha 或亮度蒙版应用于 mask-image 指定的蒙版引用。请参阅 mask-mode。
<position> - 确定每个定义的 mask-image 相对于 mask-origin 设置的蒙版位置层的初始位置。参考mask-position。
<bg-size> - 定义掩码图像的大小。请参阅 mask-size。
<repeat-style> - 确定掩码图像的重复方式。请参阅 mask-repeat。
<geometry-box> - 单个 <geometry-box> 值同时设置 mask-origin 和 mask-clip。如果存在两个值，则第一个值设置 mask-origin，第二个 mask-clip 设置值。
<geometry-box>|no-clip - 确定受 mask-image 影响的区域。
<compositing-operator> − 此值指定要在当前蒙版层上应用的合成操作。请参阅 mask-composite。

适用于

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

语法

关键字值


mask: none;

图像值


mask: url(shop.png);
mask: url(book.svg#star)

组合值


mask: url(heart.png) luminance;	
mask: url(heart.png) 40px 20px;	
mask: url(heart.png) 10px 10px / 100px 50px;	
mask: url(heart.png) repeat-y;	
mask: url(heart.png) border-box;	
mask: url(masks.svg#star) exclude;

CSS mask - none 值

以下示例演示了 mask： none 属性从元素中删除应用的遮罩效果 -


<html>
<head>
<style>
	 	.mask-none {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-image: url("images/pink-flower.jpg");
	 	 	 background-color: red;
	 	 	 -webkit-mask: url(images/heart.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	}
</style>
</head>
<body>
	 	<h2>具有遮罩效果的图像</h2>
	 	<div class="mask-none"></div>
	 	<h2>无遮罩效果的图像</h2>
	 	<div class="mask-none" style="mask:none"></div>
</body>
</html>

CSS mask - <mask-reference>

以下示例演示了 mask： URL（）属性将图像源设置为 div 元素的掩码层 -


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

CSS mask - <masking-mode>

以下示例演示了 -webkit-mask： linear-gradient（red 20%， pink 40%， green 60%， black 80%） luminance; 属性，创建彩色渐变蒙版以及影响图像亮度的亮度值 -


<html>
<head>
<style>
	 	img {
	 	 	 display: block;
	 	 	 width: 200px;	
	 	 	 height: 200px;
	 	 	 -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance;
	 	 	 -webkit-mask-position: center;
	 	 	 -webkit-mask-repeat: no-repeat;
	 	 	 -webkit-mask-size: 100% 100%;
	 	}
</style>
</head>
<body>
	 	<img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>

CSS mask - <position>

以下示例演示了使用 url（images/heart.png）值和 40px 20px 值设置蒙版位置的蒙版图像 -


<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-image: url("images/pink-flower.jpg");
	 	 	 background-size: cover;
	 	 	 -webkit-mask: url(images/heart.png) 40px 20px;
	 	 	 -webkit-mask-size: 100% 100%;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container"></div>
</body>
</html>

CSS mask - <bg-size>

以下示例演示了使用 url（images/heart.png）值和 10px 10px 值定位掩码图像的掩码图像，100px 50px 设置掩码的大小 -


<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-image: url("images/pink-flower.jpg");
	 	 	 background-size: cover;
	 	 	 -webkit-mask: url(images/heart.png) 10px 10px / 100px 50px;
	 	 	 -webkit-mask-size: 100% 100%;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container"></div>
</body>
</html>

CSS mask - <重复样式>

以下示例使用 url（images/heart.png）值演示掩码图像，repeat-y 值指示掩码图像应垂直重复 -


<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 background-image: url("images/pink-flower.jpg");
	 	 	 background-size: cover;
	 	 	 -webkit-mask: url(images/heart.png) repeat-y;
	 	 	 -webkit-mask-size: 50px;
	 	 	 -webkit-mask-position: center;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container"></div>
</body>
</html>

CSS mask - <geometry-box>

以下示例演示了使用 url（images/shop.png）值和 border-box 值的蒙版图像，该值指示蒙版图像相对于元素的边框（包括边框和填充）的位置和大小 -


<html>
<head>
<style>
	 	.container {
	 	 	 width: 250px;
	 	 	 height: 200px;
	 	 	 background-color: greenyellow;
	 	 	 padding: 10px;
	 	}
	 	.masking-image {
	 	 	 height: 120px;
	 	 	 border: 20px solid red;
	 	 	 padding: 10px;
	 	 	 background-color: violet;

	 	 	 -webkit-mask: url('images/shop.png') border-box;
	 	 	 -webkit-mask-size: cover;
	 	 	 -webkit-mask-repeat: no-repeat;
	 	}
</style>
</head>
<body>
	 	<h3>图像背景为紫色，周围有红色边框。边框外的区域将保持可见。</h3>
	 	<div class="container"><div class="masking-image"></div></div>
</body>
</html>

CSS mask - <geometry-box> |无夹

以下示例演示了使用 url（images/bookmark.png）值的掩码图像。

content-box 值表示蒙版图像相对于元素的 content-box 的位置和大小，而 no-clip 值可防止蒙版图像被裁剪到元素的内容框。


<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 300px;
	 	 	 border: 3px solid blue;
	 	}
	 	.mask-container {
	 	 	 background-color: gold;
	 	 	 display: block;
	 	 	 padding: 20px;
	 	 	 width: 220px;
	 	 	 height: 220px;
	 	 	 border: 20px solid red;
	 	 	 -webkit-mask: url(images/bookmark.png) content-box no-clip;
	 	 	 -webkit-mask-position: center center;
	 	 	 -webkit-mask-repeat: repeat;
	 	 	 -webkit-mask-size: 100px 100px;
	 	}
</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 - 相关属性

以下是与mask 相关的 CSS 属性列表：

属性	值
mask-clip	定义受蒙版影响的元素的区域。
mask-composite	定义受蒙版影响的元素的区域。
mask-image	显示或隐藏元素的特定区域。
mask-position	确定蒙版图像在元素上的放置位置。
mask-repeat	沿水平轴、垂直轴、两个轴重复图像，或者根本不重复图像。
mask-size	定义蒙版图像的大小。
mask-origin	定义蒙版图像的原点。
mask-mode	定义是否应将 mask-image 给出的蒙版引用视为亮度蒙版还是 alpha 蒙版。
mask-border	沿元素边框的边缘创建蒙版。
mask-border-mode	指定蒙版边框中使用的混合模式。
mask-border-outset	指定元素的蒙版边框与其边框之间的距离。
mask-border-repeat	设置如何调整源图像的边缘以适应元素的蒙版边框的尺寸。
mask-border-slice	将 mask-border-source 设置的图像划分为多个区域。
mask-border-source	设置用于创建元素的蒙版边框的源图像。
mask-border-width	设置元素的蒙版边框的宽度。

<< CSS - 数学函数 CSS - shape-outside（形状）属性 >>