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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 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正则校验用户名介绍
2008/07/19 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
js同源策略详解
2015/05/21 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
教师绩效工资方案
2014/02/01 职场文书
学生会干部自荐信
2014/02/04 职场文书
《社戏》教学反思
2014/04/15 职场文书
工厂车间标语
2014/06/19 职场文书
文明好少年事迹材料
2014/08/19 职场文书
员工家属慰问信
2015/03/24 职场文书
庆七一活动简报
2015/07/20 职场文书