CSS mask
遮罩属性的历史非常久远了,远到比CSS3 border-radius
等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年。
不过那个时候,遮罩只能作为实验性的属性,做一些特效使用。毕竟那个年代还是IE浏览器的时代,属性虽好,但价值有限。
但是如今情况却大有变化,除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其Firefox浏览器,从版本55开始,已经全面支持了CSS3 mask
属性。并且mask
属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。
在过去,CSS mask
属性在使用的时候就是mask: xxx
,但是现在随着这个属性的规范化,mask
属性实际上已经成为了诸多mask-*
的缩写,这和background
, border
性质是一样的。
具体是哪些属性的缩写呢,可以参见下面的列表:
mask-image
指遮罩使用的图片资源,默认值是none
,也就是无遮罩图片。因此,和border
属性中的border-style
属性类似,是一个想要有效果就必须设定的属性值。
mask-image
遮罩所支持的图片类型非常的广泛,可以是url()
静态图片资源,格式包括JPG,PNG以及SVG等都是支持的;也可以是动态生成的图片,例如使用各种CSS3渐变绘制的图片。语法上支持CSS3各类渐变,以及url()
功能符,image()
功能符,甚至element()
功能符。同时还支持多背景,因此理论上,使用mask-image
我们可以遮罩出任意我们想要的图形,非常强大。
眼见为实,我们通过大量案例来展示mask-image
的强大之处。
我们使用的遮罩图片是一个名为Xia.png的图片,如下:
HTML如下
CSS如下
.Xia{
width:300px;
height:300px;
-webkit-mask-image: url(Xia.png);
mask-image: url(Xia.png);
}
从上面这个最基本的案例,我们可以看出,所谓遮罩,就是原始图片只显示遮罩图片非透明的部分。因此,我们很少使用jpg图片来作为遮罩图片的,因为jpg图片一定是完全不透明的,最终的效果就是原图什么也看不到。
另外,如果Xia.png加载失败,则Firefox,Chrome浏览器下直接原始图不显示。
mask-mode
属性的默认值是match-source
,意思是根据资源的类型自动采用合适的遮罩模式。
例如,如果我们的遮罩使用的是SVG中的
中的
元素,则此时的mask-mode
属性的计算值是luminance
,表示基于亮度遮罩。如果是其他场景,则计算值是alpha
,表示基于透明度遮罩。
因此,mask-mode
支持下面3个属性值:
因为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);
}
目前,
mask-mode
仅Firefox
浏览器支持,因此,Chrome
浏览器是看到的依然是基于alpha遮罩的效果,颜色不像上图那样淡。
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
和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
情况下,如果容器宽高比与图片宽高比不同,
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;
}
fill-box
,stroke-box
,view-box
要与SVG元素关联才有效果,目前还没有任何浏览器对其进行支持。
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
属性性质上和background-size
类似,支持的属性值也类似,作用是控制遮罩图片尺寸。
默认值是auto
.
支持contain
和cover
这两个关键字:
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-mode
类似,都是设置不同的遮罩模式。但还是有个很大的区别,那就是mask-type只能作用在SVG元素上,本质上是由SVG属性演变而来,
因此,Chrome等浏览器都是支持的。但是mask-mode
是一个针对所有元素的CSS3属性,Chrome等浏览器并不支持,目前仅Firefox浏览器支持。
由于只能作用在SVG元素上,因此默认值表现为SVG元素默认遮罩模式,也就是默认值是luminance
,亮度遮罩模式。如果需要支持透明度遮罩模式,可以这么设置:
mask-type: alpha;
mask-composite
表示当同时使用多个图片进行遮罩时候的混合方式。支持属性值包括:
以上属性值,目前仅
Firefox
浏览器支持,Chrome
默认mask-composite
计算值是source-over
,和标准默认值add
有些差异,作用是一样的,表示多个图片遮罩效果是累加。
Chrome浏览器mask-composite支持的属性值有变化,想了解的去这里