CSS3 mask初探

马黑黑 · 发表于 2022-6-4 18:07

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-6-4 19:11 编辑

今天去看我前些天在园子里种下的玫瑰，长势挺好，可是，好几张叶子长酱紫呢：

这是金龟子之类的昆虫在夜间干的好事。哎哎，都是生命，但虫虫要行行好，不要吃光我的叶子！

这么想着，觉得自己是一个大善人，心里美滋滋。不过我善忘，一下子注意力就从叶子的问题上游移走了，不记得自己是个大善人了。我开始专注于其他事情，从叶子上的那个半圆的洞里想到了CSS3的mask-image —— 图像遮罩属性。

mask-image 将来是CSS的规范属性，现在使用它，还需要加上前缀，比如基于 chromium 内核的浏览器，需要这样写 mask-image 语句才能有效：

-webkit-mask-image: url('遮罩图片');

mask-image 使用图片去遮罩一个对象，我们暂且将 mask-image 所使用的图片称之为遮罩图片，令被遮罩的对象只显示遮罩图片不透明的部分。上面的叶子，边缘部分被咬掉了一个半圆，就是用 mask-image 属性弄出来的，我没有使用图片，而是——

大家早已知道，CSS中的背景渐变，xxx-gradient，是可以视为图片性质的东东。那么，我们设置一个这样的渐变：

radial-gradient(circle at 50% 10%, transparent 15%, red 0);

上面是径向渐变，圆形，从 50% 10% 开始，透明度占15%，剩下的是红色。然后将它写到 mask-image 属性里：

.leaf_mask {
	width: 100px;
	height: 100px;
	background: green;
	border-radius: 0 100%;
	mask-image: radial-gradient(circle at 50% 10%, transparent 15%, red 0);
	-webkit-mask-image: radial-gradient(circle at 50% 10%, transparent 15%, red 0);
}

酱紫，叶子边缘上虫咬的半圆就呈现出来了。理解起来可能有点烧脑，但只要记住前面讲过的，遮罩图片作用于一个对象（比如叶子）时，对象只显示遮罩图片中不透明的区域，换言之，mask-image 用透明的区域去遮挡对象（比如叶子），遮罩图片不透明的区域是对象显示的部分。

初探，就只说说这些，来日方长，好多 mask-image 的知识，用得上时我们再慢慢讨论。

马黑黑 · 发表于 2022-6-4 18:18

叶子的完整代码：

<style>
.leaf_mask {
width: 100px;
height: 100px;
background: green;
border-radius: 0 100%;
mask-image: radial-gradient(circle at 50% 10%, transparent 15%, red 0);
-webkit-mask-image: radial-gradient(circle at 50% 10%, transparent 15%, red 0);
}
</style>

<div class="leaf_mask"></div>