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

CSS3 mask初探

本帖最后由 马黑黑 于 2022-6-4 19:11 编辑 <br /><br /><style>
.mama { width: 100%; font: normal 16px sans-serif; }
.mama p { padding: 10px 0; }
.leaf { width: 200px; height: 200px; background: darkgreen; border-radius: 0 100%; mask-image: radial-gradient(circle at 50% 15%, transparent 12%, red 0); -webkit-mask-image: radial-gradient(circle at 50% 15%, transparent 12%, red 0);}
</style>

<div class="mama">
<p>今天去看我前些天在园子里种下的玫瑰，长势挺好，可是，好几张叶子长酱紫呢：</p>
<div class="leaf"></div>
<p>这是金龟子之类的昆虫在夜间干的好事。哎哎，都是生命，但虫虫要行行好，不要吃光我的叶子！</p>
<p>这么想着，觉得自己是一个大善人，心里美滋滋。不过我善忘，一下子注意力就从叶子的问题上游移走了，不记得自己是个大善人了。我开始专注于其他事情，从叶子上的那个半圆的洞里想到了CSS3的mask-image —— 图像遮罩属性。</p>
<p>mask-image 将来是CSS的规范属性，现在使用它，还需要加上前缀，比如基于 chromium&nbsp;内核的浏览器，需要这样写 mask-image 语句才能有效：</p><p>-webkit-mask-image: url('遮罩图片');</p>
<p>mask-image&nbsp;使用图片去遮罩一个对象，我们暂且将 mask-image 所使用的图片称之为遮罩图片，令被遮罩的对象只显示遮罩图片不透明的部分。上面的叶子，边缘部分被咬掉了一个半圆，就是用&nbsp;mask-image&nbsp;属性弄出来的，我没有使用图片，而是——</p>
<p>大家早已知道，CSS中的背景渐变，xxx-gradient，是可以视为图片性质的东东。那么，我们设置一个这样的渐变：</p>
<p>radial-gradient(circle at 50% 10%, transparent 15%, red 0);</p>
<p>上面是径向渐变，圆形，从 50% 10%&nbsp;开始，透明度占15%，剩下的是红色。然后将它写到&nbsp;mask-image&nbsp;属性里：</p>
<pre>.leaf_mask {
        width: 100px;
        height: 100px;
        background: green;
        border-radius: 0 100%;
        <font color="#ff0000">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);</font>
}
</pre>
<p>酱紫，叶子边缘上虫咬的半圆就呈现出来了。理解起来可能有点烧脑，但只要记住前面讲过的，遮罩图片作用于一个对象（比如叶子）时，对象只显示遮罩图片中不透明的区域，换言之，mask-image&nbsp;用透明的区域去遮挡对象（比如叶子），遮罩图片不透明的区域是对象显示的部分。</p><p>初探，就只说说这些，来日方长，好多&nbsp;mask-image&nbsp;的知识，用得上时我们再慢慢讨论。</p>

</div>

马黑黑 发表于 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>

小辣椒 发表于 2022-6-4 19:32

黑黑我这个手机看也是出界面的

马黑黑 发表于 2022-6-4 20:20

小辣椒 发表于 2022-6-4 19:32
黑黑我这个手机看也是出界面的

手机浏览器估计跟不上新标准的

梦油 发表于 2022-6-4 20:35

由表及里，由浅入深，黑黑朋友教学有方。

马黑黑 发表于 2022-6-4 20:45

梦油 发表于 2022-6-4 20:35
由表及里，由浅入深，黑黑朋友教学有方。

{:4_190:}

加林森 发表于 2022-6-4 20:54

来学习。

红影 发表于 2022-6-4 21:14

这个的确很烧脑。
“剩下的是红色。”别的颜色也可以的吧，只要是不透明的，就起作用？

马黑黑 发表于 2022-6-4 21:42

红影 发表于 2022-6-4 21:14
这个的确很烧脑。
“剩下的是红色。”别的颜色也可以的吧，只要是不透明的，就起作用？

只要是颜色

红影 发表于 2022-6-4 22:39

马黑黑 发表于 2022-6-4 21:42
只要是颜色

哦哦，知道了，也就是它之分透明或者有颜色，别的不管{:4_173:}

马黑黑 发表于 2022-6-4 23:08

红影 发表于 2022-6-4 22:39
哦哦，知道了，也就是它之分透明或者有颜色，别的不管

对的

红影 发表于 2022-6-5 11:45

马黑黑 发表于 2022-6-4 23:08
对的

非常奇怪的一个语句。

马黑黑 发表于 2022-6-5 11:47

红影 发表于 2022-6-5 11:45
非常奇怪的一个语句。

JS中控制它，在本地测试毫无问题，弄到论坛来被视为元素属性不合法无法驱动

红影 发表于 2022-6-5 12:15

马黑黑 发表于 2022-6-5 11:47
JS中控制它，在本地测试毫无问题，弄到论坛来被视为元素属性不合法无法驱动

可能又有什么命令冲突了吧。

马黑黑 发表于 2022-6-5 12:18

红影 发表于 2022-6-5 12:15
可能又有什么命令冲突了吧。

不清楚，但不一定，应该是其他未知的原因，毕竟这个mask当前还是实验室的东东，有空我去查查文档
页: [1]
查看完整版本: CSS3 mask初探