前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是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. react-native修改android包名

    安卓已包名作为应用的唯一id,相对iOS来说改起来就不是那么方便,但为了能正式发布自己的应用,还是得改过来. 假设包名为com.exease.etd.objective,以下地方需要修改. 首先是两个 ...

  2. laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）

    laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结 一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高 优势:减轻数据库压力 缺 ...

  3. 分享知识-快乐自己：Oracle 创建序列 及 使用序列

    1.创建序列语法: create sequence 序列名 [可选参数] 序列名常定义为‘seq_XXX’的形式,创建序列不能使用replace 可选参数说明: increment by: 序列每次增 ...

  4. julia

    版本还不成熟,等成熟了再完整的看看吧.

  5. linux 进程学习笔记-运行新进程

    我们知道,当用fork启动一个新进程以后,新进程会复制父进程的大部份内存空间并接着运行父进程中的代码,如果我们使新进程不运行原父进程的代码,转而运行另外一个程序集中的代码,这就相当于启动了一个新程序. ...

  6. 杂项：OASIS（结构化信息标准促进组织）

    ylbtech-杂项:OASIS(结构化信息标准促进组织) 1.返回顶部 1. OASIS(结构化信息标准促进组织,Organization for the Advancement of Struct ...

  7. linux 命令2

    who who am i ssh scott@192.168.1.105 ps aux | grep pts/8 pwd // where are you? Page 205 mkdir -p dir ...

  8. 面向对象——final关键字

    继承的弊端:打破了封装性 解决方式:final final关键字的特点: 1.final是一个修饰符,即可以修饰类,也可以修饰方法,还可以修饰变量 2.final修饰的类不可以被继承 3.final修 ...

  9. Binary Tree Inorder Traversal-非递归实现中序遍历二叉树

    题目描述: 给定一颗二叉树,使用非递归方法实现二叉树的中序遍历 题目来源: http://oj.leetcode.com/problems/binary-tree-inorder-traversal/ ...

  10. QT时钟绘制

    Demo的效果 资源占用还能接受 运行久一点内存就下去了 下面是Demo的代码 #include "mainwindow.h" #include "ui_mainwind ...