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 |
前一篇: SVG路径输出适配图像
下一篇: 十六进制颜色转RGB格式
发表评论:
评论列表 [0条]
