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 border-radius属性详解
Jul 05 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python中的错误处理
2016/04/10 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python逆序打印各位数字的方法
2018/06/25 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python装饰器原理与用法深入详解
2019/12/19 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
如何用python 操作zookeeper
2020/12/28 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
竞选演讲稿范文
2013/12/28 职场文书
外贸业务员工作职责
2014/01/06 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
Python实现视频中添加音频工具详解
2021/12/06 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers