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中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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/07/12 PHP
php目录管理函数小结
2008/09/10 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
php计算年龄精准到年月日
2015/11/17 PHP
javascript 写类方式之五
2009/07/05 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python模拟Django框架实例
2016/05/17 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Django如何使用redis作为缓存
2020/05/21 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
护士岗位职责
2014/02/16 职场文书
法人授权委托书
2014/04/03 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
Python获取字典中某个key的value
2022/04/13 Python