CSS mask遮罩
一、CSS mask遮罩的过往和现状
CSS mask
遮罩属性的历史非常久远了,远到比CSS3 border-radius
等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年。
不过那个时候,遮罩只能作为实验性的属性,做一些特效使用。毕竟那个年代还是IE浏览器的时代,属性虽好,但价值有限。
但是如今情况却大有变化,除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其Firefox浏览器,从版本55开始,已经全面支持了CSS3 mask
属性。并且mask
属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。
二、CSS mask属性
在过去,CSS mask
属性在使用的时候就是mask: xxx
,但是现在随着这个属性的规范化,mask
属性实际上已经成为了诸多mask-*
的缩写,这和background
, border
性质是一样的。
具体是哪些属性的缩写呢,可以参见下面的列表:
- mask-image
- mask-mode
- mask-repeat
- mask-position
- mask-clip
- mask-origin
- mask-size
- mask-type
- mask-composite
三、CSS mask-image属性详细介绍
mask-image
指遮罩使用的图片资源,默认值是none
,也就是无遮罩图片。因此,和border
属性中的border-style
属性类似,是一个想要有效果就必须设定的属性值。
mask-image
遮罩所支持的图片类型非常的广泛,可以是url()
静态图片资源,格式包括JPG,PNG以及SVG等都是支持的;也可以是动态生成的图片,例如使用各种CSS3渐变绘制的图片。语法上支持CSS3各类渐变,以及url()
功能符,image()
功能符,甚至element()
功能符。同时还支持多背景,因此理论上,使用mask-image
我们可以遮罩出任意我们想要的图形,非常强大。
眼见为实,我们通过大量案例来展示mask-image
的强大之处。
下面所有案例使用原始图如下
- 最基础的png图片遮罩展示
我们使用的遮罩图片是一个名为Xia.png的图片,如下:
HTML如下
<img src="img.jpg" class="Xia"></img>
CSS如下
.Xia{width:300px;height:300px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);}
从上面这个最基本的案例,我们可以看出,所谓遮罩,就是原始图片只显示遮罩图片非透明的部分。因此,我们很少使用jpg图片来作为遮罩图片的,因为jpg图片一定是完全不透明的,最终的效果就是原图什么也看不到。
另外,如果Xia.png加载失败,则Firefox,Chrome浏览器下直接原始图不显示。
CSS mask-mode属性详细介绍
mask-mode
属性的默认值是match-source
,意思是根据资源的类型自动采用合适的遮罩模式。
例如,如果我们的遮罩使用的是SVG中的<defs>
中的<mask>
元素,则此时的mask-mode
属性的计算值是luminance
,表示基于亮度遮罩。如果是其他场景,则计算值是alpha
,表示基于透明度遮罩。
因此,mask-mode
支持下面3个属性值:
- mask-mode: alpha;此关键字指示应使用掩码层图像的透明度(阿尔法通道)值作为掩码值。
- mask-mode: luminance;此关键字指示掩膜层图像的亮度值应用作掩码值。
- mask-mode: match-source;(默认值)根据资源的类型自动采用合适的遮罩模式。
因为mask-image支持多图片,因此mask-mode也支持多属性值,例如:
mask-mode: alpha, match-source;
例如,我们把Xia.png遮罩改成基于亮度luminance
,如下CSS:
.Xia{width:300px;height:300px;-webkit-mask-mode: luminance;mask-mode: luminance;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);}
结果Firefox浏览器下:
目前,
mask-mode
仅Firefox
浏览器支持,因此,Chrome
浏览器是看到的依然是基于alpha遮罩的效果,颜色不像上图那样淡。
五、mask-repeat属性详细介绍
mask-repeat
属性的默认值是repeat
,行为类似于background-repeat
属性。
支持以下一些单属性值:
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: no-repeat;
mask-repeat: space;
mask-repeat: round;
同时,根据自己的测试,Chrome
和Firefox
浏览器都支持x轴y轴2两轴同时表示,例如:
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;
由于mask-image
支持多遮罩图片,因此,mask-repeat
也支持多属性值,例如:
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;
每个属性值的含义如下:
repeat-x
水平x
平铺,效果类似:
repeat-y
垂直y平铺。
repeat
默认值,水平和垂直平铺。
no-repeat
不平铺,会看到就一个遮罩图形孤零零的挂在左上角。
space
space
同background
等属性中的space
,表示遮罩图片尽可能的平铺同时不发生任何剪裁。
然而根据我的测试,在Chrome浏览器下,一侧边缘还是发生了剪裁,不过不明显。Firefox浏览器则完美表现。
round
round
表示遮罩图片尽可能靠在一起没有任何间隙,同时不发生任何剪裁。这就意味着图片可能会有比例的缩放。
例如我们选择mask-repeat
为round
,则遮罩效果就变成这样:
六、mask-position属性详细介绍
mask-position
和background-position
支持的属性值和表现基本上都是一模一样的。
例如,mask-position
默认计算值是0% 0%
,也就是相对左上角定位。
支持单个关键字(缺省关键字的解析为center
):
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;
支持垂直和水平方向两个关键字:
mask-position: right top;
支持各类数值:
mask-position: 30% 50%;<
mask-position: 10px 5rem;
支持X轴和Y轴方向:
mask-position-X:30px;
mask-position-Y: 10px ;
由于mask-image支持多遮罩图片,因此,mask-position也支持多属性值,例如:
mask-position: 0 0, center;
Chrome
和Firefox
浏览器都支持mask-position
属性,Chrome
还需要-webkit-
私有前缀,Firefox
浏览器现在已经不需要了。
例如,在mask-repeat
值为no-repeat
前提下,我们选择属性值为top
,则遮罩效果表现为顶部居中:
在no-repeat
情况下,如果容器宽高比与图片宽高比不同,
- cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
- contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
七、mask-clip属性详细介绍
mask-clip
属性性质上和background-clip
类似,但是mask-clip
支持的属性值要多一点,主要是多了个SVG元素的mask-clip
支持。
支持属性值如下:
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
mask-clip: no-clip;
其中默认值是border-box
和background-clip
类似。同样也支持多属性值:
mask-clip: content-box, border-box;
虽然支持的属性值挺多,但是对于普通元素而言,生效的其实就前面3个,Firefox浏览器还支持no-clip
。
例如,已知CSS如下:
.mask-image {width: 300px; height: 300px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);border: 20px solid #34538b;padding: 20px;margin: 20px;
}
则我们选择content-box
效果:
fill-box
,stroke-box
,view-box
要与SVG元素关联才有效果,目前还没有任何浏览器对其进行支持。
八、mask-origin属性详细介绍
mask-origin
属性性质上和background-origin
类似,但是mask-origin
支持的属性值要多一点,主要是多了个SVG元素的mask-origin
支持。
支持属性值如下
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
其中默认值是border-box
和background-origin
类似。同样也支持多属性值:
mask-origin: content-box, border-box;
虽然支持的属性值挺多,但是对于普通元素而言,目前生效的其实就前面3个。
例如,已知CSS如下:
.mask-image {width: 250px; height: 187.5px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);border: 20px solid red;padding: 20px;margin: 20px;
}
fill-box
,stroke-box
,view-box
要与SVG元素关联才有效果,目前还没有任何浏览器对其进行支持。
九、mask-size属性详细介绍
mask-size
属性性质上和background-size
类似,支持的属性值也类似,作用是控制遮罩图片尺寸。
默认值是auto
.
支持contain
和cover
这两个关键字:
- cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
- contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
mask-size: cover;
mask-size: contain;
支持各类数值(缺省高度会自动计算为auto
):
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
同样支持多属性值:
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;
效果演示,如下CSS:
.mask-image {width: 250px; height: 187.5px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);-webkit-mask-size: cover;mask-image: cover;
}
结果效果如下图(Chrome和Firefox浏览器均如此):
十、mask-type属性简介
mask-type
属性功能上和mask-mode
类似,都是设置不同的遮罩模式。但还是有个很大的区别,那就是mask-type只能作用在SVG元素上,本质上是由SVG属性演变而来,
因此,Chrome等浏览器都是支持的。但是mask-mode
是一个针对所有元素的CSS3属性,Chrome等浏览器并不支持,目前仅Firefox浏览器支持。
由于只能作用在SVG元素上,因此默认值表现为SVG元素默认遮罩模式,也就是默认值是luminance
,亮度遮罩模式。如果需要支持透明度遮罩模式,可以这么设置:
mask-type: alpha;
十一、mask-composite属性详细介绍
mask-composite
表示当同时使用多个图片进行遮罩时候的混合方式。支持属性值包括:
- add;遮罩累加。
- subtract;遮罩相减。也就是遮罩图片重合的地方不显示。意味着遮罩图片越多,遮罩区域越小。
- intersect;遮罩相交。也就是遮罩图片重合的地方才显示遮罩,。
- exclude;遮罩排除。也就是后面遮罩图片重合的地方排除,当作透明处理。
以上属性值,目前仅
Firefox
浏览器支持,Chrome
默认mask-composite
计算值是source-over
,和标准默认值add
有些差异,作用是一样的,表示多个图片遮罩效果是累加。
Chrome浏览器mask-composite支持的属性值有变化,想了解的去这里
CSS mask遮罩相关推荐
- 怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
- 使用CSS - mask 实现视频弹幕人物遮罩过滤
经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙"的躲到人物的下面,看着非常的智能. 简单的 ...
- 奇妙的 CSS MASK
本文将介绍 CSS 中一个非常有意思的属性 mask . 顾名思义,mask 译为遮罩.在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 ...
- CSS mask 实现鼠标跟随镂空效果
点击下方星标本公众号,实用前端技术文章及时了解 偶然在某思看到这样一个问题,如何使一个div的部分区域变透明而其他部分模糊掉?,最后实现效果是这样的: 进一步,还能实现任意形状的镂空效果: 鼠标经过的 ...
- CSS半透明遮罩层 and 定位
html <!-- 半透明遮罩层 --> <div class="mask" style="display: none;"></d ...
- 基于CSS mask和clip-path实现切角的技巧
本文翻译自 Tricks to Cut Corners Using CSS Mask and Clip-Path Properties,略有删改 原作者:Temani Afif 我们最近使用CSS m ...
- moviepy音视频剪辑:使用mask遮罩实现视频叠加透明效果
☞ ░ 前往老猿Python博客 https://blog.csdn.net/LaoYuanPython ░ 一.引言 在<moviepy音视频剪辑:mask clip遮罩剪辑.遮片.蒙版的作用 ...
- moviepy音视频剪辑:使用mask遮罩剪辑实现叠加透明效果详解
☞ ░ 前往老猿Python博客 https://blog.csdn.net/LaoYuanPython ░ 注:本文为付费专栏文章,如果没订购付费专栏也不想订购相关付费专栏的读者,请阅读对应的免费文 ...
- Unity Mask 遮罩无效 解决方案
Unity Mask 遮罩无效 解决方案 前言 本人开发的APP有着需要发布到手机.Pico一体机.华为Glass眼镜上的需求,因此项目是一个多合一的工程.由此在制作如文字滑动的效果时,遇到了一个问题 ...
- 【CSS】mask遮罩
出于对b站视频为什么不遮挡人物的好奇,查看了相关的图片和相关文档,发现图片是类似于一个PS的遮罩层: 这张图片是怎么来的,肯定是AI识别出来然后生成的,一张图片也就一两K,一次加载很多张也不会造成很大 ...
最新文章
- 2.javascript之缓存 localStorage 和sessionStorage之间的区别
- mac 苹果多版本jdk自由切换
- iOS 毛玻璃效果的实现方法
- 写一个 panic blame 机器人
- 在Xshell 6开NumLock时按小键盘上的数字键并不能输入数字
- 02_Storm集群部署
- 【jQuery Demo】jQuery打造动态下滑菜单
- android怎么增量编译,Android Transform增量编译
- 如何使用NFC读卡器读取NFC卡片的UID?
- windows7系统iis安装不了应该怎么办
- 刘润《五分钟商学院》思维导图笔记 - 商业篇
- Spring+Spring MVC+MyBatis实现SSM框架整合详细教程【转】
- 获取微信公众号文章封面图的技巧/网站
- js如何判断Object是否为空?
- meta分析森林图解读,实例讲解教你快速学会meta分析森林图解读!
- 三十七度的夏天挤公车
- 后端:静态资源放在cdn cdn涵义 cdn加载
- 基于 SpringBoot + Vue 实现的物联网/智能家居系统
- Visual Studio Code之xml编辑器安装
- 理解极大似然估计与最大后验概率估计
热门文章
- 各大互联网企业Java面试题汇总,看我如何成功拿到百度的offer
- 少儿编程--STEMA考试介绍转自STEMA (STEM 能力测试) 考 试 白 皮 书
- 寒假2019培训:白银莲花池-usaco2007(洛谷P2411)
- 微信PC版Hook发送群艾特消息研究
- iOS app加密探究爱加密iOS app加密原理
- 如何将eslipse的背景色变为暗黑色
- please select a valid python interpreter(请选择一个解释器)
- android /mnt/sdcard 只读,Android重要的文件目录mnt/sdcard 和 /sdcard
- 计算机制图孔中心线,机械制图中各种中心线绘制方法.docx
- IT互联网行业猎头的年终总结:结束后开始