CSS Masking - mask-image 属性_CSS 菜鸟教程

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>

<< CSS Masking - mask-clip 属性 CSS Masking - mask-mode 属性 >>