CSS 中的 CSS mask-image 属性用于设置元素的掩码图像。蒙版图像定义了元素的哪些部分是可见的,哪些部分是透明的,从而允许您创建复杂的视觉效果。蒙版图像透明的元素区域将完全透明,而不透明的区域将完全可见。
可能的值
- none − 默认值。该元素未应用蒙版图像。
- <mask-source> - 可以通过URL引用或SVG<mask>元素访问图像。
- <image> - 使用 image() 定义掩膜图像层。
适用于
所有元素。在 SVG 中,它适用于容器元素,不包括 <defs> 元素和所有图形元素
语法
关键字值
mask-image: none;
<mask-source>值
mask-image: url(bookmark.png);
<image> 值
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(bookmark.png), skyblue);
CSS mask-image - none 值
以下示例演示 -webkit-mask-image: none 属性不应用任何屏蔽效果 -
<html>
<head>
<style>
.masking-image {
width: 300px;
height: 200px;
background-color: green;
-webkit-mask-image: url('images/bookmark.png');
mask-image:url('images/bookmark.png');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
</style>
</head>
<body>
<h2>With Mask Image</h2>
<div class="masking-image"></div><br>
<h2>With Mask Image Set To none Value</h2>
<div class="masking-image" style="-webkit-mask-image:none;mask-image:none;"></div>
</body>
</html>
CSS mask-image - <mask-source>
以下示例演示了 -webkit-mask-image: url() 属性的用法,其中给定的粉红色花朵图像仅在面具图像定义的形状内可见 -
<html>
<head>
<style>
.masking-image {
width: 300px;
height: 300px;
background-image: url('images/pink-flower.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-image: url('images/bookmark.png');
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url('images/bookmark.png');
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
}
</style>
</head>
<body>
<div class="masking-image"></div>
</body>
</html>
CSS mask-image - <image>
以下示例演示了 -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent) 属性将线性渐变应用为掩码 -
<html>
<head>
<style>
.masking-image {
width: 500px;
height: 300px;
background-image: url('images/red-flower.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
}
</style>
</head>
<body>
<div class="masking-image"></div>
</body>
</html>