摘要:接下来我先以为例,简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一,然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变,应用到彩色图层上就会产生透明度的渐变。
蒙版工作原理
设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例,简单解释蒙版的工作原理。
上图中我创建了两个图层——蓝色的背景和红色的前景,并且在红色前景上应用了一个蒙版(右边红圈)。正常情况下红色前景应该完全遮盖住蓝色背景,但是请注意红圈中的蒙版,我在这个蒙版上画了一个黑色的矩形。
蒙版中黑色代表不可见(opacity: 0),白色代表可见(opacity: 100%),将蒙版对应到红色图层后就很容易理解:黑色矩形在红色图层上对应的区域变成了不可见,所以下层的蓝色会显示出来。
基本用法:显示与隐藏还是以上面Photoshop中的图为例子,我们用SVG来一步一步地创建一个这样的图形。
先创建红色前景和蓝色背景
在SVG中使用蒙版需要在使用前在
光有了蒙版没有用,我们还需要在蒙版中添加图形元素并指定黑白颜色。
至此一个基本的蒙版就完成了,https://codepen.io/LuXuanqing...
进阶用法:透明度渐变之前在讲蒙版原理的时候说到:
黑色代表不可见(opacity: 0),白色代表可见(opacity: 100%)。
那么黑白之间的灰色代表什么呢? 聪明的同学已经想到了,从0%到100%是一个线性的变化,所以黑白中间的灰色会是半透明,而且不同灰度代表不同程度的半透明,越趋近白色可见度越高。在蒙版中的黑白渐变,应用到彩色图层上就会产生透明度的渐变。
https://codepen.io/LuXuanqing...
总结与讨论掌握上述两种用法基本上就足够应对日常需求了,但是
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50612.html
摘要:接下来我先以为例,简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一,然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变,应用到彩色图层上就会产生透明度的渐变。 蒙版工作原理 设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例,简单解释蒙版的工作原...
摘要:使用透明蒙版等在四个角画三角形来遮罩出六边形我们来一一试验使用透明蒙版如果纯色背景还可以,但是背景要求透明的,所以第一种看样子不大可能了。 我们在处理图片,比如用户头像的时候,通常上传的都是矩形图片 例如:showImg(https://segmentfault.com/img/bVkHOG); 有时候根据设计师的需求,会要求是圆形或者带圆角,这时候我们通常使用css border-...
摘要:大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的,而遮罩层是不显示的。利用能做出一些不错的效果,比如。想到用这个属性正合适,于是要来了心型图片,拿到设计师导出的文件,用压缩下得到一个。 遮罩层,如果学过Flash的同学应该都听过,跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的,而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞,我...
阅读 1736·2023-04-25 19:37
阅读 1299·2021-11-16 11:45
阅读 2803·2021-10-18 13:30
阅读 2764·2021-09-29 09:34
阅读 1623·2019-08-30 15:55
阅读 3112·2019-08-30 11:10
阅读 1833·2019-08-29 16:52
阅读 996·2019-08-29 13:18