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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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
NOT NULL 和NULL
2007/01/15 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
基于PHP制作验证码
2016/10/12 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
php实现文章评论系统
2019/02/18 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
初婚未育证明样本
2014/10/24 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2015年教务工作总结
2015/05/23 职场文书
学籍证明模板
2015/06/18 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
MySQL的存储过程和相关函数
2022/04/26 MySQL