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动画效果
Aug 14 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 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的知识
2006/11/17 PHP
php 注释规范
2012/03/29 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
移动端js图片查看器
2016/11/17 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python如何删除列为空的行
2020/07/17 Python
python3实现简单飞机大战
2020/11/29 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
银行委托书范本
2014/04/04 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
财务会计实训报告
2014/11/05 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
离婚协议书怎么写
2015/01/26 职场文书
外科护士长工作总结
2015/08/12 职场文书