前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是canvas画图或CSS3的clip（剪切），发现都不理想，和设计稿里的图形美观度相差太大，而且实现起来太麻烦，后来，小五采用了一个CSS3的新增属性完美的解决了这个问题，今天就来和大家分享一下。

首先来解释一下遮罩、蒙版：和PS中的蒙版、Flash中的遮罩层很类似

遮罩：为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。

一、Mask 的兼容性

以下是来自 caniuse 的统计：

ie/edge 全面不支持，Android 和 iOS Safari 阵营几乎全线飘浅绿，意味着支持部分功能 。不过，Android 4.0 及以下版本的对 mask 的兼容性并不友好！多亏了近几年智能手机市场的良性竞争，给移动前端制造了一个相对良好的环境，经小五亲测，主流机型基本上都支持这个属性了。

二、Mask 的原理

蒙板可以是 CSS3 渐变或者半透明的PNG图片，蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。如下：

三、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 是相仿的。

四、实战

原素材：

① 心形图片实现

<!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="data:images/img.jpg"/>

</body>

</html>

DEMO演示

② 渐变图片实现

代码：

<!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="data:images/img.jpg"/>

</body>

</html>

DEMO演示

或者是将渐变以代码的形式进行设置

<!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="data:images/img.jpg"/>

</body>

</html>

效果呈现：

DEMO演示

好啦，至此CSS3遮罩蒙版效果讲完了，想生成多姿多彩图案的小伙伴快快试试吧~~~

此文章主要发布在本人所在公司网站H5案例分享（http://www.h5-share.com/）、公司公众号H5握手和个人博客中，转载请注明出处。

特殊形状图片之遮罩蒙版CSS3-Mask效果的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  3. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  4. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  5. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  6. 《转》15种CSS混合模式让图片产生令人惊艳的效果

    浏览器支持 按照现在情况来讲, 浏览器支持 CSSbackground-blend-mode属性还在不断的完善中.早期版本的浏览器目前还不支持,但caniuse.com报告说在Chrome,Firef ...

  7. Android 图片合成：添加蒙板效果 不规则相框 透明度渐变效果的实现

    Android 图片合成:添加蒙板效果 不规则相框 透明度渐变效果的实现 暂时还未有时间开发这效果,所以先贴出来. 先贴一张效果图,这是一张手机截屏: 左上方的风景图:背景图片 右上方的人物图:前景图 ...

  8. mui 卡片视图 遮罩蒙版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. css3毛玻璃效果白边问题

    注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...

随机推荐

  1. Spring当中的名称装配和类型装配有什么区别？

    6 人赞同了该回答 Spring auto-wire的 五种方式:1:no 默认的方式是不进行自动装配,通过手工设置ref 属性来进行装配bean2:byName 通过参数名 自动装配,如果一个bea ...

  2. 51nod 1189

    题目 神犇题解 表示自己数论渣成狗...膜拜神犇. n!*(x+y)=x*y n!^2=(x-n!)*(y-n!) 那么求出n!^2的因数个数就可以了.

  3. matlab之sum()函数

    sum(A,1):对矩阵A按照列求和: sum(A,2):对矩阵A按照行求和: 默认情况下,是按照列求和的. 举例: A=[1 2 3;1 2 3] sum(A,1)的结果: ans = 2 4 6 ...

  4. html5--1.7超链接上

    html5--1.7超链接上 一.超链接的5种形式 <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. [原创]Java动态生成word文档（图文并茂）

    很多情况下,软件开发者需要从数据库读取数据,然后将数据动态填充到手工预先准备好的Word模板文档里,这对于大批量生成拥有相同格式排版的正式文件非常有用,这个功能应用PageOffice的基本动态填充功 ...

  6. SocketSessionConfig参数设制

    Mina 是一个韩国人写的基本java NIO的一个高性能的传输框架,我们的搜索就是基本它作为一个搜索服务开放接口了.对于系统的TIME_WAIT过多,造成服务器的负载过高,这个问题我也不用多说了,这 ...

  7. oracle11g登录等问题

    一.oracle 11g登录服务开启 成功安装Oracle 11g后,共有7个服务,这七个服务的含义分别为:1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写 ...

  8. linux命令学习笔记-kill和killall命令详解

    *杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常都能达到目 ...

  9. [Shell]grep命令

    我是好文章的搬运工,原文来自ChinaUnix,博主scq2099yt,地址:http://blog.chinaunix.net/uid-22312037-id-4217835.html 一.基本用法 ...

  10. 构建基于虚拟用户的vsftpd服务器

    安装: [root@server ~]# yum install -y vsftpd [root@server ~]# rpm -ql vsftpd /etc/logrotate.d/vsftpd / ...