CSS3 mask 遮罩的具体使用方法


Posted in HTML / CSS onNovember 03, 2017

css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。

mask的简写会将 mask-border 设为初始值。使用mask的简写优于其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。

mask-image

mask-image 通过读取透明度对html元素进行遮罩,黑色代表透明,白色代表不透明,灰色为半透明。适用于所有元素,在SVG中,它作用于包含<defs>元素和所有图形元素的容器。

/* 图片资源 */
-webkit-mask-image: url(mask.png);

/* css的渐变属性 */
 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 

/* image属性 ~ ??? */
-webkit-mask-image: image(url(mask.png), skyblue);
/* 混合属性 */
-webkit-mask-image: url('http://d.lanrentuku.com/down/png/1410/bw_halloween/bat-3-256.png'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

mask-repeat

/* 单个值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
/* 两个值 horizontal(水平)  vertical(垂直) (以下仅为示例)*/
-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;

/* Multiple values */
-webkit-mask-repeat: space round, no-repeat;
-webkit-mask-repeat: round repeat, space, repeat-x;

/* 多层遮罩  (。・_・)/~~~*/
mask-image: url('mask1.png'), url('mask2.png');
mask-repeat: repeat-x, repeat-y;

mask-clip

-webkit-mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip;

-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Multiple values */
-webkit-mask-clip: padding-box, no-clip;
-webkit-mask-clip: view-box, fill-box, border-box;

mask-origin

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Non-standard keyword values */ 
-webkit-mask-origin: content; 
-webkit-mask-origin: padding; 
-webkit-mask-origin: border;

mask-size

.divTest{
    padding: 40px;
    background-color: #03ff36;
    background-image: url(http://cdn01.baidu-img.cn/timg?image_search&quality=80&size=b10000_10000&sec=1470644878&di=f054ab9449175833cf84b3429acacd88&imgtype=jpg&src=http%3A%2F%2Fimg0.bdstatic.com%2Fimg%2Fimage%2Fshouye%2Fxiaoxiao%2Fis099s8ky-PC.jpg));
    -webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(http://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.png));
    -webkit-mask-repeat: space,repeat-y;
    -webkit-mask-clip: text; 
    -webkit-mask-size: 5%, 8%;
    border: 30px solid red;
}

mask-composite (均不支持 ಥ _ ಥ )

mask-composite: add | subtract | intersect | exclude;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 #HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 #HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 #HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 #HTML / CSS
css3 pointer-events 介绍详解
Sep 18 #HTML / CSS
You might like
php中session退出登陆问题
2014/02/27 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Python中的进程分支fork和exec详解
2015/04/11 Python
Python中的filter()函数的用法
2015/04/27 Python
python正则表达式的使用
2017/06/12 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
会计专业自我评价
2014/02/12 职场文书
软件项目开发计划书
2014/05/01 职场文书
违纪学生保证书
2015/02/27 职场文书
民主生活会主持词
2015/07/01 职场文书
导游词之晋城蟒河
2019/12/12 职场文书