前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是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. windows下的git使用指令

    经常使用mac和linux 这次使用window开发了一些小项目 废话不多说: git init git add . git commit -m 'note' git remote add origi ...

  3. Linux bash shell环境变量以及语法规范

    摘自: http://blog.csdn.net/abc_ii/article/details/8762739

  4. BZOJ 1231 [Usaco2008 Nov]mixup2 混乱的奶牛：状压dp + 滚动数组

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1231 题意: 给你n个数字s[i],问你有多少个排列,使得任意相邻两数字之差的绝对值大于m ...

  5. LNMP安装(一)

    前传: 环境介绍: Centos7.2-minimal 下载地址:http://mirrors.163.com/centos/7.2.1511/isos/x86_64/ (网易镜像站) 所需安装包:链 ...

  6. php设置编码格式的方法

    a. 如果欲使用gb2312编码,那么php要输出头:header(“Content-Type: text/html; charset=gb2312"),静态页面添加<meta htt ...

  7. WEB攻击之 CSRF 攻击及防御策略

    介绍 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法. 释义: 跨站请求攻击,简单地说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作(如 ...

  8. DDP入门

    DDP,即动态动态规划,可以用于解决一类带修改的DP问题. 我们从一个比较简单的东西入手,最大子段和. 带修改的最大子段和其实是常规问题了,经典的解决方法是用线段树维护从左,右开始的最大子段和和区间最 ...

  9. [转载]Windows网络编程系列教程之四：Select模型

    原文:http://www.51see.com/asp/bbs/public/bp_show.asp?t_id=200308131152297103 讲一下套接字模式和套接字I/O模型的区别.先说明一 ...

  10. Pmod使用的4种模式

    引言 多年以来,一直存在标准泛滥的现象,而我们电子业尤其严重.您是否曾经想过,为什么我们对有些奇怪的数字或测量计的东西建立标准?关于航天飞机的固体燃料火箭推进器的直径是否真的源自于马屁股的宽度的讨论非 ...