CSS中常用的图形处理属性_属性值

mask-image

​mask-image​​属性的作用是设置使用遮罩效果的图像。语法​​mask-image: none | <image> | <mask-source>​​默认值为​​none​​,表示默认无遮罩图片。​​<image>​​表示图像数据类型,包括css渐变图像、image-set()函数、url()函数、cross-fade()和element()等函数,​​<mask-sourct>​​表示遮罩元素类型,主要指svg遮罩元素。

<div>
<img src="test.jpg" clss="warpper">
</div>
<style>
.warpper {
mask: no-repeat center/contain;
mask-image: url(box.png);
}
</style>

mask-mode

​mask-mode​​属性的作用是根据资源的类型自动采用合适的遮罩模式,默认值为​​match-source​​。如果遮罩效果使用的是SVG中的​​<mask>​​元素,则此时的mask-mode属性的计算值是​​luminance​​,表示基于亮度判断是否要进行遮罩。如果是其他场景,则计算值是​​alpha​​,表示基于透明度判断是否要进行遮罩。支持3个属性值,分别是match-source、luminance和alpha,可以单个使用也可以多属性值一起使用。

mask-repeat

​mask-repeat​​属性的默认值是repeat,作用类似于background-repeat属性。支持单属性值,repeat-x表示水平方向平铺。repeat-y表示垂直方向平铺。repeat是默认值表示水平和垂直方向均平铺。no-repeat表示不平铺,会看到只有一个遮罩图形位于左上角。space和background属性中的space的含义是类似的,表示遮罩图片尽可能地平铺,同时不进行任何剪裁。round表示遮罩图片尽可能靠在一起,没有任何间隙,同时不进行任何剪裁,这就可能造成图片会产生缩放效果。

mask-clip

​mask-clip​​属性用来设置遮罩效果显示的盒子区域。mask-clip属性支持的属性值比较多,其中有​​border-box​​、​​padding-box​​、​​content-box​​、​​no-clip​​、​​fill-box​​、​​stroke-box​​和​​view-box​​。其中默认值为​​border-box​​,而且该属性不支持​​margin-box​​,但是支持多属性。​​mask-clip: padding-box border-box​​。​​no-clip​​的作用是不对元素的遮罩效果做区域上的限制。​​fill-box​​表示遮罩应用的区域是图形填充区域形成的边界盒子。​​stroke-box​​表示的遮罩区域把描边占据的区域也包含在内。​​view-box​​表示使用最近的svg视口作为参考盒子,如果svg代码中的viewbox属性有设置,则遮罩区域盒子位于viewbox属性建立的坐标系的原点,尺寸由viewbox属性中的宽高值决定。

<svg width="333" height="222" viewbox="0 0 333 222">
<ellipse cx="156" cy="78" rx="138" ry="64" class="mask-svg stroke-box"></ellipse>
</svg>


mask-size

​mask-size​​作用是控制遮罩图片尺寸,性质类似于background-size属性,默认值是​​auto​​,支持​​contain​​和​​cover​​两个关键字属性值。也支持百分比值和长度值,如果垂直方向的尺寸省略,会自动计算为auto。也支持多属性值一起使用。

mask-size: contain;
mask-size: 44%;
mask-size: 6rem;
mask-size: 7px auto contain;

mask-composite

​mask-composite​​属性表示同时使用多张图片进行遮罩时的合成方式,支持的属性值比较多,其中有​​add​​为默认值,表示遮罩累加。​​subtract​​表示遮罩相减也就是遮罩图片重合的区域不显示,意思就是遮罩图片越多,遮罩区域越小。​​intersect​​表示遮罩相交,也就是遮罩图片重合的区域才显示遮罩。​​exclude​​表示遮罩排除,也就是遮罩图片重合的区域被当作透明的,常常被用于渐变图像可以实现反向遮罩效果,应用于实现镂空的遮罩效果。

mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

在谷歌浏览器中除了以上属性值,还有额外的属性值。例如​​source-over​​表示遮罩区域累加。​​source-in​​表示遮罩区域是交叉重叠的区域。​​source-out​​表示遮罩区域是上层图像减去其和下层图像重叠的区域。​​source-atop​​表示保留底层图像区域,并在其上方累加上层和下层图像重叠的区域。​​destination-over​​表示下层遮罩图像叠加在上层遮罩图像上,默认的遮罩模式是基于alpha通道计算的。​​destination-in​​表示遮罩区域是交叉重叠的区域。​​destination-out​​表示遮罩区域是下层区域图像减去其和上层图像重叠的区域。​​destination-atop​​表示保留上层图像区域,并在上方累加上层和下层图像重叠的区域。​​xor​​表示上层图像和下层图像重叠的区域透明。​​copy​​表示忽略下层图像,只使用上层图像区域作为遮罩区域。​​clear​​当遮罩图像有多张的时候,最终的遮罩效果是完全透明的。

-webkit-mask-composite: source-out;
-webkit-mask-composite: copy;

mask-border

​mask-border​​属性是多个属性的缩写,​​mask-border-mode​​属性表示边框遮罩的模式,支持alpha和luminance这两个关键字属性值,分别表示遮罩效果是基于透明度还是基于亮度。​​mask-border-outset​​属性表示边框遮罩效果向外偏移的大小,支持长度值和数值,如果值是数值,则表示边框宽度borde-width属性值的倍数。

mask-border-outset: 3rem;
mask-border-mode: alpha;