特殊形状图片之遮罩蒙版CSS3-Mask效果
2017-03-14 00:06
591 查看
前不久做了一个项目,需要一个小效果,就是获取用户头像以心形的形状展现在页面上,开始小五想的实现方式是canvas画图或CSS3的clip(剪切),发现都不理想,和设计稿里的图形美观度相差太大,而且实现起来太麻烦,后来,小五采用了一个CSS3的新增属性完美的解决了这个问题,今天就来和大家分享一下。
首先来解释一下遮罩、蒙版:和PS中的蒙版、Flash中的遮罩层很类似
遮罩:为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。
一、Mask 的兼容性
以下是来自 caniuse 的统计:
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9293b448.jpg-mark1)
ie/edge 全面不支持,Android 和 iOS Safari 阵营几乎全线飘浅绿,意味着支持部分功能 。不过,Android 4.0 及以下版本的对 mask 的兼容性并不友好!多亏了近几年智能手机市场的良性竞争,给移动前端制造了一个相对良好的环境,经小五亲测,主流机型基本上都支持这个属性了。
二、Mask 的原理
蒙板可以是 CSS3 渐变或者半透明的PNG图片,蒙板元素的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。如下:
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d989371cd.jpg-mark1)
三、mask 的属性
PS:mask 的语法与 background 是相仿的。
四、实战
原素材:
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9c480405.png-mark1)
① 心形图片实现
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9d7a4ee8.png-mark1)
DEMO演示
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9f9112aa.png-mark1)
② 渐变图片实现
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881da071d4b9.png-mark1)
代码:
DEMO演示
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881da27a24c3.png-mark1)
或者是将渐变以代码的形式进行设置
效果呈现:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/29/b4226b071d8b505bea0b65e8bdba3b35.png)
DEMO演示
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881da6a3abdc.png-mark1)
好啦,至此CSS3遮罩蒙版效果讲完了,想生成多姿多彩图案的小伙伴快快试试吧~~~
此文章主要发布在本人所在公司网站H5案例分享(http://www.h5-share.com/)、公司公众号H5握手和个人博客中,转载请注明出处。
首先来解释一下遮罩、蒙版:和PS中的蒙版、Flash中的遮罩层很类似
遮罩:为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。
一、Mask 的兼容性
以下是来自 caniuse 的统计:
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9293b448.jpg-mark1)
ie/edge 全面不支持,Android 和 iOS Safari 阵营几乎全线飘浅绿,意味着支持部分功能 。不过,Android 4.0 及以下版本的对 mask 的兼容性并不友好!多亏了近几年智能手机市场的良性竞争,给移动前端制造了一个相对良好的环境,经小五亲测,主流机型基本上都支持这个属性了。
二、Mask 的原理
蒙板可以是 CSS3 渐变或者半透明的PNG图片,蒙板元素的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。如下:
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d989371cd.jpg-mark1)
三、mask 的属性
-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/ -webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat -webkit-mask-position:x y; -webkit-mask-clip:border | padding | content -webkit-mask-origin:border | padding | content
PS:mask 的语法与 background 是相仿的。
四、实战
原素材:
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9c480405.png-mark1)
① 心形图片实现
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9d7a4ee8.png-mark1)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>Mask 蒙版1</title> <link href="style/style.css" rel="stylesheet"> <style type="text/css"> img{position: absolute; width: 300px;height: 256px; left: 50%;top: 50%; margin-left: -150px;margin-top: -128px; -webkit-mask-image:url(images/mask1.png);} </style> </head> <body> <img src="images/img.jpg"/> </body> </html>
DEMO演示
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881d9f9112aa.png-mark1)
② 渐变图片实现
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881da071d4b9.png-mark1)
代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>Mask 蒙版2</title> <link href="style/style.css" rel="stylesheet"> <style type="text/css"> img{position: absolute; width: 300px;height: 256px; left: 50%;top: 50%; margin-left: -150px;margin-top: -128px;-webkit-mask-image:url(images/mask2.png);} </style> </head> <body> <img src="images/img.jpg"/> </body> </html>
DEMO演示
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881da27a24c3.png-mark1)
或者是将渐变以代码的形式进行设置
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>Mask 蒙版3</title> <link href="style/style.css" rel="stylesheet"> <style type="text/css"> img{position: absolute; width: 300px;height: 256px; left: 50%;top: 50%; margin-left: -150px;margin-top: -128px;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0))); } </style> </head> <body> <img src="images/img.jpg"/> </body> </html>
效果呈现:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/29/b4226b071d8b505bea0b65e8bdba3b35.png)
DEMO演示
![](http://niu.h5-share.com/Uploads%2F2017-01-20%2F5881da6a3abdc.png-mark1)
好啦,至此CSS3遮罩蒙版效果讲完了,想生成多姿多彩图案的小伙伴快快试试吧~~~
此文章主要发布在本人所在公司网站H5案例分享(http://www.h5-share.com/)、公司公众号H5握手和个人博客中,转载请注明出处。
相关文章推荐
- CSS3 mask 遮罩蒙版效果
- css3实现图片遮罩效果鼠标hover以后出现文字
- CSS3 遮罩蒙版效果 分栏效果
- 用于mask遮罩效果的图片配合resizableImage使用
- css3实现图片遮罩效果鼠标hover以后出现文字
- 文字与图片渐变效果(图层CALayer与属性蒙版mask )
- 巧用CSS3 border实现图片遮罩效果代码
- 浅谈图片蒙版效果-webkit-mask
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- css3实现 鼠标移上图片 放大遮罩效果
- opengl透明mask图片做蒙版效果的实现
- 巧用CSS3 border制作图片遮罩效果
- css3 实现图片遮罩效果,hover出现文字
- 优秀前端教程:实现图片的形状遮罩和动画放大效果
- 分享一个Css3效果---无比惊艳的全屏图片切换效果(Css浏览器Only)
- DX下实现图片的遮罩(Mask)
- css图片遮罩蒙板 全局斜线网格覆盖效果
- jquery动画 -- 3.创建一个带遮罩效果的图片走廊
- CSS3图片展示效果
- 非常惊艳的Css3的桌面上散落的相片效果,以及单击放大图片的LightBox效果(独立Js非jQuery)的实现原理