特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS的mask
(遮罩),有时也称CSS的蒙层,最早是苹果公司2008年提出的,并且添加到webkit
引擎当中。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类型于png24
位或png32
位中的alpha
透明通道的效果。2012年被纳入到W3C的草案中,但这个版本与苹果公司提出的版本是不同的。时至今日,该规范已经有多个版本,现在是CSS Masking Module Level1版本,属于TR阶段。据Caniuse.com统计来讲,该属性得到的支持度还是有一定的限制,仅部分属性被浏览器支持。虽然如此,但该属性还是非常的有意思,值得大家花点时间去探究,比如今天要聊的mask-composite
属性就是非常有意思的一个属性。
mask
原理和语法
文章开头也提到过,mask
提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24
位或png32
位中alpha
透明通道的效果。
图像是由RGB
三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道,即alpha
通道。通过高度定义每个像素上的透明度。白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明。比如下图:
给一个HTML元素使用CSS的mask
属性,就会这样处理。不用给图片应用一个alpha
通道,只需要给一个图片运用一个mask-image
或mask-border-source
的样式:
mask-image: url(mouse.png)
他从图片遮罩里读出图片的透明信息,然后应用到HTML元素上,比如下图这个效果:
遮罩可以让头像按照特定形状显示。
CSS遮罩可以使得图片按照任意的形状显示。或者你可能有很长的文本需要滚动显示,那么可以使用遮罩让他从不透明到透明的渐变显示。
在使用mask
的时候,其中有一个不可或缺的部分就是遮罩(也被称为蒙板),该遮罩可以是半透明的PNG图片、CSS的渐变或SVG元素,遮罩元素的alpha
值为0
的时候会覆盖下面的元素,为1
的时候会完全显示下面的内容。如下图所示:
而使用CSS的mask
也并不太复杂,其语法规则和background
非常的类似。在W3C官网上提供了两者相关属性的对照表:
mask 属性 |
background 属性 |
---|---|
mask-clip |
background-clip |
mask-image |
background-image |
mask-origin |
background-origin |
mask-position |
background-position |
mask-repeat |
background-repeat |
mask-size |
background-size |
mask-mode |
|
mask-composite |
|
background-attachment |
|
background-color |
具体的语法规则:
mask: <mask-layer>
其<mask-layer>
对应的值:
<mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>
即:
mask: [mask-image] [mask-repeat] [mask-position] / [ mask-size]
和background
属性类似,建议mask-size
单独写出来:
mask: [mask-image] [mask-repeat] [mask-position]
mask-size: [mask-size]
上面我们列出的的仅是mask
部分属性,在规范中还提供了其他的属性,这几个属性有点类似于CSS中的border
属性,比如mask-border-source
、mask-border-mode
、mask-border-slice
、mask-border-width
、mask-border-outset
、mask-border-repeat
、mask-border
等。另外还可以用于SVG,比如mask-type
。
上面简单的介绍了CSS中mask
的基本原理和使用规则,但我们今天的重点并不是来了解所有的属性,而是针对性的学习其属性之一,即mask-composite
属性。如果你想了解更多有关于mask
相关的知识,建议你花点时间阅读下列文章:
- 如何在CSS中使用遮罩
- CSS遮罩CSS3 mask/masks详细介绍
- CSS3 Mask 安利报告
- A Comprehensive Guide to Clipping and Masking in SVG
- CSS中的剪裁和遮罩
- 打破盒子模式的限制,使用Clip-Path创建响应式图形
mask-composite
mask-composite
仅是CSS的mask
的子属性之一。该属性的工作原理是什么?它有什么用?使用它的价值是什么?
如果将上述问题一一答出来之后,可以彻底让我们掌握mask-composite
的原理和使用方式。@Ana Tudor新出的博文《Mask Compositing: The Crash Course》就详细介绍了这些,也称得上是mask-composite
速成记。
如需转载,烦请注明出处:https://www.w3cplus.com/css/mask-compositing.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!