前端遮罩层实现_前端制作遮罩与蒙版
-1
遮罩: 有色则显示,无色抠取,半透明则半透明
蒙版: 黑色则抠除,白色显示,灰色则半透明
概念上两者非常容易混淆,但完成的效果是一样的,需记住哪个是无色抠取,哪个是黑色抠除。
再者还有个裁剪,只是做裁切,没有对半透明情况的处理。
这样一说就知道,本文阅读起来可能是会有点乱的。
那么前端方法中 如何实现,又各 有哪些应用场景 呢?
mask(css) (遮罩)
mask(svg)(蒙版)
background-clip(css)(裁切)
clip(canvas)(裁切)
globalCompositeOperation(canvas)(遮罩)
clip-path(css, svg)(裁切)
其他旁门左道
mask(css)
比较容易搜到的,也是用得最多的,强得一批。
现在是只有遮罩功能的,mask 指定的是下层形状,本元素及其所有子级为上层图案。
以后的发展可能会通过 mask-composite 实现蒙版,小期待一下吧。
遮罩嘛,即有色就显示,无色则隐藏。
rgba(0,0,0,0)、tranpsarent,png 图片中的透明 或 无色 就抠除。
mask 和 background 的设置非常类似,也可以缩写:
mask-image / mask-repeat / mask-position / mask-size / mask-origin / mask-clip
mask-image 也和 background-image 一样支持 url, gradient,image-set,element 等等。
举几个栗子:
/* 滚动容器底部带点效果 */
.scroller-mask {
-webkit-mask: linear-gradient(#000 calc(100% - 5em), transparent);
mask: linear-gradient(#000 calc(100% - 5em), transparent);
}
/* 当然用 linear-gradient + pointer-events:none 也是不错的方法 */
image
/* 这个难理解一点,你看哪个有遮罩,哪块是透明的,唔,最好手写一下试试 */
.mask {
-webkit-mask-image: url(img/flower.png) center / 0 0 no-repeat;
mask-image: url(img/flower.png) center / 0 0 no-repeat;
animation: mask 2s;
}
@keyframes mask {
0% {-webkit-mask-size: 0 0;mask-size: 0 0}
100% {-webkit-mask-size: 100% 100%;mask-size: 100% 100%}
}
image
DEMO:https://foreverz133.github.io/demos/works/mask/ (网速有点慢)
至于剩下的 mask-mode / mask-type / mask-composite 浏览器支持还不太妙,暂可以不考虑。
但功能上却是强大,需要更多了解还请自行翻阅 文档。
PS:兼容性 方面虽然一片红,IE 什么的抛弃掉,实验下来其实还不错。写上 -webkit-mask 基本都能用。
PPS:firefox 中动画时 mask-size 小于 100% 会不显示,但定值可以,原因不知。
mask(svg)
个人有点莫名的习惯,不管做什么效果,都会往 SVG 上想一想,可能源于它强大的功能吧。
相比 html+css 多了很多特性,如路径/线条的设置/诸多滤镜/视图限定等;
相比 canvas 多了一些 dom 上的便捷操作,如事件。
SVG 可以用 mask 来实现 蒙版,用 clipPath 来实现 裁剪(下文会讲)。
区分一下,svg mask 为蒙版,白色为显示;css mask 为遮罩,有色为显示。
如果 mask 的颜色 fill 不填或为 none 表示无色,则不显示
如果有色但非黑白色,则按色值计算透明度,如 red 为 rgb(255,0,0) 相当于 opacity: 0.3333;
其中 rgba(0,0,0,.5) 并不会显示半透明,因为它是黑色的,挺奇怪
mask 蒙版内可以包裹透明图片或文字。
但使用蒙版的元素,却莫名不能是 image,这就很完蛋呀,有待研究。
background-clip(css)
如果 css 的 mask 适用于图片和渐变等的话,那 background-clip:text 就适用于文字。
字面意思,将背景裁切成文字范围。
另外,background-clip 还可以设 content-box,也是不错的功能,
默认 padding-box,border-box 有上边框不被修改的 BUG。
注:兼容性 上,明文规定要加 -webkit-。顺便抛弃 IE。
.demo {
background-image: linear-gradient(red, #000);
-webkit-background-clip: text;
color: transparent; /* 不见得非要用 text-fill-color */
}
很多文章误以为是 text-fill-color 实现了遮罩功能,其实是 background-clip:text 呀!
clip(canvas)
clip 在 canvas 中本来的作用是切一块画布独立出来。
拿来做遮罩效果也是可以的,但并非真的遮罩,只是裁剪,因为它不是按有色无色来判断显示的。
var cv = document.querySelector('#canvas');
var img = document.querySelector('img');
var w = cv.width = window.innerWidth, h = cv.height = window.innerHeight;
var ctx = cv.getContext('2d');
ctx.save();
ctx.arc(60, 60, 50, 0, 2*Math.PI);
ctx.clip(); // 切一个圆形画布出来
ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.restore();
还可以用 beginPath, lineTo 等线条操作来形成图形。
注:fillRect 和 strokeRect 是无法被切出来的,要用 rect。
注:为了避免影响其他地方,用 save 和 restore 包起来就行了。
注:文字遮罩用 clip 是无法实现的。
globalCompositeOperation(canvas)
修改 canvas 的渲染规则。比如后写的盖住前面的,改成后写的放到低层之类的。
这些规则中有一个 source-in,就能实现 遮罩(按黑白色来判断显隐)。
ctx.fillRect(10, 10, 200, 200);
ctx.globalCompositeOperation = "source-atop"; // 改为前者区域绘制后者
ctx.drawImage(img, 50, 50, img.width, img.height);
ctx.globalCompositeOperation = "source-out";
如果你用的 strokeRect 和 fillText 那绘制出来的也是相应效果哟。
如果前者是半透明的,覆盖的后者渲染出来也会是半透明的。
如果前者是半透明的 PNG 图片,覆盖的后者出来的也会是半透明,强无敌。
注:globalCompositeOperation 的默认值是 source-over,用完了别忘了改回来,不然会影响后续操作。
全部规则效果一览:https://foreverz133.github.io/demos/single/globalCompositeOperation.html
其中有一些可以拿出来提一下,挺好玩的。
source-in:交叉的部分渲染后者
destination-in:交叉的部分渲染前者
destination-out:去掉交叉的部分
destination-over:后者放至下层
clip-path(svg)
主要还是以裁剪为主,裁剪当然是不会根据形状的颜色什么的来判断显隐的咯。
clip-path(css)
css 的 clip-path 是老版属性 clip 的改良版,clip 必须绝对定位,且只有矩形还只能 px。
clip-path 则支持方形/圆形/椭圆形/多边形,单位也更丰富。
// 方形,上右下左距边框距离 round 圆角
clip-path: inset(1px 10% 1em 1vw round 2px 4px 6px 8px);
// 圆形,半径 at 位置
clip-path: circle(15px at 20px 20px);
// 椭圆,半轴长 at 位置
clip-path: ellipse(50% 30% at 50% 50%);
// 多边形
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
我觉得 clip-path 和 border-radius 一样,改个图片或者盒子的样式又方便又爽。
但也不一样,因为是裁剪,像 border 呀子级内容呀什么的也是会被剪掉的,hover 也还是原来的尺寸。
其他旁门左道
background
border
除此之外,radial-gradient 可以完成部分类似功能,比如圆形的镂空,位置和大小设置相较也更方便。
shape-outside
shape-outside 仅能算作是高级版 float 扩展,也与本文毫无关系。
只是因为既然写了 clip-path 那 shape-outside 就提一下,避免有理解错误。
注:shape-outside 得是浮动元素时才有效。
注:它能设的值和 clip-path 基本一致
它并不会改变本身什么东西,形状不会变,border 等也还是原来的样子,还得结合 clip-path 来用。
它只是让其他与其贴边的元素有了一个不一样的贴边效果。
.box {
width: 100px;
height: 100px;
float: left;
background: pink;
border: 3px solid #333;
box-shadow: 0 0 10px;
margin-right: 20px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
tim 20171115110340
PS:兼容性 吧,怎么说呢,回退到方形影响应该不大。
虽然 clip-path 又不像 border-radius 可以加边框阴影什么的,但其实 polygon 多边形可以有高级玩法,
比如:https://codepen.io/airen/pen/VPKQxb
文档 显示以后会支持 url 和 element 等,那就很方便了呀。顺便再期待一下 shape-inside 的出现。
你思考一下 css 的 mask / background-clip / clip-path 和 shape-outside 的使用场景,这其实很有意思。
结语
遮罩是有色的部分显示图案,蒙版是白色的部分显示图案,裁剪只是裁成这个形状,三者的实际妙用在本文中并没有深入书写,仅算是梳理其功能和明确其区别。
还请大佬们多多分享此方面的巧妙案例咯,让小弟也开开眼。
前端遮罩层实现_前端制作遮罩与蒙版相关推荐
- 怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
- 添加遮罩层,实现点击穿透,实现遮罩层按钮点击,遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了 如果在绝对定位层上存在能够点击的元素,在添加" poin ...
- html遮罩层原理,纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原 ...
- html 图片添加遮罩层,jQuery图片添加渐变遮罩层插件
这是一款jQuery图片添加渐变遮罩层插件.通过该插件,可以为一副背景图片添加指定的渐变遮罩层.该插件支持CSS mix-blend-mode混合模式. 使用方法 在页面中引入jquery和jquer ...
- java前端接口怎么写_前端接口怎么写
1.java后台怎么写接口给前端使用 java后台如何给前端写使用接口,框架一开始就得考虑好的,很多都使用mvc架构往往用户登录时,用户密码符合,会允许其访问,保存登录信息,下次就不需要再次登录了,直 ...
- 前端遮罩层实现_jQuery 实现的遮罩层效果
思路: 当触发一个事件,弹出一个iframe,让这个iframe遮住后面的页面,这样后方的页面功能就会全部失效,也就可以达到一个遮罩的效果,再通过一个事件取消ifram,恢复后方页面的功能. 代码: ...
- 点击空白处遮罩层关闭_如何手动关闭win10系统自带的windows defender
windows defender简称WD,是win10系统自带的一款杀毒软件,也是微软的"亲儿子",从win8开始,微软就对这个"亲儿子"狠下功夫,争取让它早日 ...
- 前端实现图片悬浮_前端技巧集:三步制作图片悬浮文字
鼠标悬停在图片上显示文字,是电商网页经常使用的效果,下面三步教会大家CSS如何完成这个效果. 前提 HTML图片和文字是并列显示的.如下: 我是雪豹 1. 将文字浮在图片上 我们加个div把图片和文字 ...
- 前端传中文文件名_前端工程师需要掌握哪些知识,web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
- dao模式和前端控制器结合使用_前端技术及开发模式的演进,带你了解前端技术的前世今生...
先声明,本篇不会讲带有年代性的前端发展史,不讲故事,想了解的读者可以去查阅一些其他的资料和文章,本篇仅仅从技术发展角度结合案例分析,说明前端技术的发展和开发模式的演进变化.本篇内容重点说明PC端技术, ...
最新文章
- 独家 | 用spaCy蒸馏BERT模型
- express get和post数据
- 政府会给我们补贴吗?
- 小白入门angular-cli的第一次旅程(学习目标 1.路由的基础知识 参数订阅写法)
- CM: Word document里某些值没有被web service 填充的原因
- linux守护进程的编写
- 一道很简单的贪心算法题~【贪心:我不要脸的伐?】
- Android 7.0 隐式广播-监听网络变化
- C# 高效率创建字符串类(StringBuilder)
- idea开启自动热部署自动化devtools
- jfreechart的时序图(曲线图)运行时间长了就变的很卡
- 【2019杭电多校第七场1010=HDU6655】Just Repeat(思维)
- WebAPI HelpPage出现Failed to generate the sample for media type 'application/x-www-form-urlencoded'. 错
- 怎么查看个人CSDN账号积分-最靠谱!
- 假设某台台式计算机的内存储器容量为128,假设某台计算机的内存储器容量为128MB,硬盘容量为10GB,硬盘的容量是内存容量的多少倍?...
- EXCEL复制可见单元格
- Mat常用构造函数及IplImage 与Mat 之间的相互转换
- VBA-批量删除文本框内容(用类实现)
- 解决“warning #188-D enumerated type mixed with another type”告警
- TIPTOP ERP 开发视频教程