CSS mask
属性在使用的时候就是mask: xxx
,但是现在随着这个属性的规范化,mask
属性实际上已经成为了诸多mask-*
的缩写,这和background
, border
性质是一样的。
mask-image
mask-image
指遮罩使用的图片资源,默认值是none
,也就是无遮罩图片。因此,和border
属性中的border-style
属性类似,是一个想要有效果就必须设定的属性值。
mask-image
遮罩所支持的图片类型非常的广泛,可以是url()
静态图片资源,格式包括JPG,PNG以及SVG等都是支持的;也可以是动态生成的图片,例如使用各种CSS3渐变绘制的图片。
语法上支持CSS3各类渐变,以及url()
功能符,image()
功能符,甚至element()
功能符。同时还支持多背景,因此理论上,使用mask-image
我们可以遮罩出任意我们想要的图形,非常强大。