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 | 设置元素的蒙版边框的宽度。 |