请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 的知识,用得上时我们再慢慢讨论。
|