前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是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. Android环境下通过C框架层控制WIFI【转】

    本文转载自:https://blog.csdn.net/edw200/article/details/52192631 本人是从事Linux嵌入式开发的,安卓wifi控制在安卓JAVA层已经做得非常成 ...

  2. 8--json交互

    8.1 为什么要进行json数据交互 json数据格式在接口调用.html页面中较常用,json格式较简单,解析较方便. 比如:webservice接口,传输json数据. 8.2      spri ...

  3. 集群 openfire

    openfire_3.8.2集群配置 测试机4台1.四台机器都安装openfire,随即一台安装mysql,执行openfire_mysql.sql脚本.2.四台机器都配置到同一个mysql机器上(不 ...

  4. python基础-发邮件smtp

    先来想下发送邮件需要填写什么,还需要有什么条件1.与邮件服务器建立连接,用户名和密码2.发邮件:发件人,收件人,主题,内容,附件3.发送 使用第三方邮箱发送邮件 #! /usr/bin/env pyt ...

  5. OP趋势系统

    经过3年多时间的摸索,经历过熊市牛市的历练,终于完成坚持已久的OP趋势系统的实践,接下来,我将在股灾后,每天都分享OP趋势系统的信号,可以很负责任的说,经过10年历史数据的测试,加上3年的实盘,更加坚 ...

  6. multitail

    multitail 在分隔的窗口查看你的日志

  7. CodeForces - 884F :Anti-Palindromize（贪心&费用流）

    A string a of length m is called antipalindromic iff m is even, and for each i (1 ≤ i ≤ m) ai ≠ am - ...

  8. MySQL-with rollup函数运用 _20160930

    在博客里http://www.cnblogs.com/Mr-Cxy/p/5898839.html提到了行转列, 如果想在下面这个表下面添加一行 总计 数据行SQL代码怎么实现 并且根据9月金额进行城市 ...

  9. P2762 [网络流24题]太空飞行计划问题(最小割)

    地址 最大权闭合子图裸题,不说了吧,求方案就是把s集遍历一遍. 错误记录:dfs那块忘判断残量了,11分×1. #include<cstdio> #include<iostream& ...

  10. ie下使用文本编辑器导致input文本框无法聚焦的问题原因

    最近公司的一个项目遇到一个如下问题: 描述:测试发现,每当我们在发布活动的页面发布完活动后,页面跳转到我的活动,然后再次回到发布活动页面,发现所有的input文本框都不能聚焦.然后再去看看其他页面(我 ...