CSS mask关键属性汇总

马黑黑 · 发表于 2025-11-11 11:47

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-11-11 12:20 编辑

CSS mask关键属性
属性	说明	取值	默认值
mask-image	定义遮罩的图像源，定义一个或多个遮罩图像，这些图像的不透明度值决定了元素的哪些部分应该显示或隐藏	可以是none表示没有遮罩，或者是一个URL指向遮罩图像，也可以是linear-gradient, radial-gradient等	none
mask-repeat	可选值与background-repeat相同，控制遮罩图像是否重复以及如何重复	1. repeat-x： repeat no-repeat 2. repeat-y：no-repeat repeat 3. repeat：repeat repeat 4. space：space space 5. round：round round 6. no-repeat：no-repeat no-repeat	repeat
mask-position	可选值与background-position相同，定义遮罩图像在元素背景坐标系统中的初始位置	top、bottom、left、right、center、百分比、长度值、revert-layer、unset、inherit、initial、revert	0% 0%
mask-clip	定义哪些元素的边框盒部分应该被遮罩图像裁剪，可选值与background-clip相同	content-box、padding-box、border-box、fill-box、stroke-box、view-box、no-clip、border、padding、content、text	border-box
mask-origin	可选值与background-origin相同，定义遮罩图像相对于哪个盒子定位	content-box、padding-box、border-box、fill-box、stroke-box、view-box、content、padding、border	border-box
mask-size	控制遮罩图像的大小，可选值与background-size相同	auto、cover, contain, 长度值，百分比等	auto
mask-composite	定义当多个遮罩图像应用于同一元素时，它们是如何组合在一起的，遮罩图像的叠加方式	add（叠加）、subtract（挖空）、intersect（重叠保留）、exclude（并集）	add
mask-mode	定义了遮罩图像中颜色通道的处理方式。默认情况下，遮罩图像的alpha通道被用作遮罩，但你也可以选择使用RGB颜色通道	luminance (亮度模式)，alpha (默认，alpha通道)，match-source (源图像的原模式)	alpha

马黑黑 · 发表于 2025-11-11 11:54

CSS mask 属性对当前版本的现代浏览器来说没有任何障碍，但还是需要注意其兼容性：对 chromium 内核 < 120 的第三方封装而言，它是得不到支持的，需要加入前缀 -webkit-，例如简写形式：

mask: url('遮罩图片地址') no-repeat center/cover;
-webkit-mask: url('遮罩图片地址') no-repeat center/cover;

两行都写，第一行被支持版本直接渲染，第二行向下兼容，内核版本低于120的chrome封装也能正常渲染。