前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是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. initcall_debug简要说明【转】

    本文转载自:https://blog.csdn.net/zangdongming/article/details/37769265 Linux version 3.10.40 1. 使用说明 Docu ...

  2. Spring Boot2.0之 原理—创建内置Tomcat容器

    前面所述的https://www.cnblogs.com/toov5/p/9823728.html 中的第一条先不赘述了,就是玩了maven 重点介绍后两条 首先内置Tomcat: SpringBoo ...

  3. iOS数据持久化存储之归档NSKeyedArchiver

    归档是一种很常用的文件储存方法,几乎任何类型的对象都能够被归档储存(实际上是一种文件保存的形式),收集了网上的一些资料并结合自己的一些经验,总结如下. 一.使用archiveRootObject进行简 ...

  4. 如何识别真Microsoft服务与非Microsoft服务来定位病毒自己的服务

    在我当网管的那段时间,发现有病毒入侵客户服务器,该病毒伪装自己的进程名,我们在服务中发现其也有伪装成系统服务的服务在运行,占用客户服务器的性能,使得CPU与内存的利用率达到90%以上,并持续时间长,甚 ...

  5. hdu 1002 A + B Problem II（大数）

    题意:就是求a+b (a,b都不超过1000位) 思路:用数组存储 第一道大数的题目,虽然很水,纪念一下! 代码: #include<cstdio> #include<cstring ...

  6. python function with variadic arguments or keywords(dict) 可变参数与关键字参数

    *args 表示任意个普通参数,调用的时候自动组装为一个tuple **kwags 表示任意个字典类型参数, 调用的时候自动组装成一个dict args和kwags是两个约定俗成的用法. 变长参数可以 ...

  7. CSDN不登陆看博文

    做前端的朋友说,手动改太Low,给了段JS代码: javascript: void((function() {var divElement = document.getElementById('art ...

  8. ACM学习历程—BestCoder 2015百度之星资格赛1002 列变位法解密（vector容器）

    Problem Description 列变位法是古典密码算法中变位加密的一种方法,具体过程如下 将明文字符分割成个数固定的分组(如5个一组,5即为密钥),按一组一行的次序整齐排列,最后不足一组不放置 ...

  9. p1020导弹拦截

    传送门 P1020导弹拦截 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度 ...

  10. BZOJ3196：二逼平衡树

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 浅谈\(Splay\):https://www.cnblogs.com/AKMer/p/ ...