mask属性是css3的吗_CSS3 mask 遮罩的具体使用方法
css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。
mask的简写会将 mask-border 设为初始值。使用mask的简写优于其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。
mask-image
mask-image 通过读取透明度对html元素进行遮罩,黑色代表透明,白色代表不透明,灰色为半透明。适用于所有元素,在SVG中,它作用于包含元素和所有图形元素的容器。
/* 图片资源 */
-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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
mask属性是css3的吗_CSS3 mask 遮罩的具体使用方法相关推荐
- mask属性是css3的吗_CSS mask-image属性详细介绍(小结)
CSS mask遮罩属性的历史非常久远了,远到比CSS3 border-radius等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年. 不过那个时候,遮罩只能作为实验性的属性 ...
- mask属性是css3的吗_CSS滤镜之Mask属性
Mask属性为对象建立一个覆盖于表面的膜.它的表达式也很简单: Filter:Mask(Color=颜色) 只有一个Color参数,用来指定使用什么颜色作为掩膜. 同样,我们来看一下一幅图片在加上ma ...
- mask属性是css3的吗_CSS遮罩——如何在CSS中使用遮罩
大概一年前,我写过一篇文章介绍有关webkit中新的css技术--css滤镜,如果其他浏览器不能支持的话会,这是个麻烦. 有关于Webkit中的滤镜,大家要是感兴趣的话可以阅读<CSS3 Fil ...
- mask属性是css3的吗_使用CSS3 mask(蒙版,遮罩)属性实现超酷按钮悬停动画
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Lato:100,300,400") ...
- linux 终端 渐变色,iOS开发——UI篇文字渐变效果:图层中的mask属性
本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 一.文字渐变效果: 二.文字渐变实现思路: 1.创建一个颜色渐变层,渐变图层跟文字控件一样大. 2.用文字图层裁剪渐变层,只 ...
- html中滤镜的效果图,CSS滤镜之Mask属性-网页设计,HTML/CSS
mask属性为对象建立一个覆盖于表面的膜.它的表达式也很简单: filter:mask(color=颜色) 只有一个color参数,用来指定使用什么颜色作为掩膜. 同样,我们来看一下一幅图片在加上ma ...
- Unity 3D-- 摄像机Clear Flags和Culling Mask属性用途详解
1.简述两个属性 1.1 Clear Flags 清除标记 每个相机在渲染时会存储颜色和深度信息.屏幕的未绘制部分是空的,默认情况下会显示天空盒.当你使用多个相机时,每一个都将自己的颜色和深度信息存储 ...
- CALayer mask属性实现蒙板效果
相信很多人在ios上实现控件圆角的时候都用过:cornerRadius这个属性,例如实现圆形头像,一般我会这么写: self.headImageView.layer.masksToBounds = Y ...
- 利用layer.mask属性实现简单遮罩动画
昨天和大家分享了一下xib上的一些细节上的使用技巧,今天和大家分享以下本人第一次做出的比较好看的一个动画,到现在仍觉得这种效果很流行,且好看,是利用layer.mask属性所制作的,废话不多说,先效果 ...
最新文章
- mysql分页原理和高效率的mysql分页查询语句
- gdb info frame信息解释
- layui select 修改_layui修改select的值的方法
- 【C语言简单说】三:整数变量扩展和输出扩展(3)
- golang mysql大量连接_golang mysql 如何设置最大连接数和最大空闲连接数
- 使用 Moq 测试.NET Core 应用 -- Mock 方法
- for循环语句例题及解析python_Python入门第8课,for语句综合练习,突破循环累加难点...
- java 二分查找_Java数组之Arrays方法
- 微课|Python程序设计开发宝典(5.1.2节):修饰器
- jQuery封装的选项卡方法
- CPU+GPU异构集群搭建的总结说明
- HTTP访问控制(CORS)踩坑小记
- Spark入门案例--出租车数据分析
- html悬浮音乐符号,简谱中常用的音乐记号
- 想从事区块链开发? 你应该这么做
- linux sed替换行,shell - 使用Sed替换包含字符串的整行
- 十分详细的阳光十六法则 (转)
- LSF_安装(UNIX or Linux)
- Java经典入门教程!大连埃森哲java招聘信息
- WT588F/E系列语音芯片驱动程序注意事项
热门文章
- socket通信流程图
- C语言如何获取结构体中指定元素的大小?sizeof ( (X*)0 ) -> Y)(空指针操作)
- pycharm git 超详细教程
- 二值mask图像 + RGB原图 生成可视化分割结果; 从二值mask获取分割轮廓点
- Spring注解的使用步骤,@Component注解创建的对象名称,常用注解Component、Repository、Service以及Controller的区别
- mybatis中getMapper是怎么通过动态代理得到dao接口的实现类并执行mapper文件sql语句的
- Java读写文件的几种方式
- 【Java虚拟机规范】JVM类加载机制
- Java的多线程和线程池的使用,你真的清楚了吗?
- springmvc代码详细(五种映射,绑定参数,处理json数据,文件上传,转发,拦截器的实现)