CSS中的mask属性详解

一、mask属性概述
mask属性允许通过遮罩图像或渐变来控制元素内容的可见性。遮罩的透明度决定了元素对应区域的显示程度：

• 遮罩完全不透明（如白色） → 元素该区域完全显示。
• 遮罩完全透明（如透明或黑色） → 元素该区域隐藏。
• 遮罩半透明 → 元素该区域半透明显示。

二、mask属性的核心子属性
mask是简写属性，包含以下常用子属性：

1. mask-image

   • 设置遮罩图像，支持：
     • url()：图像路径（PNG、SVG等）。
     • 渐变（如linear-gradient()）。
     • none（默认值，无遮罩）。
   • 示例：

     .element {  
       mask-image: url(mask.png);  
     }  
     

2. mask-mode

   • 定义遮罩是亮度遮罩（luminance，默认）还是透明度遮罩（alpha）。
   • alpha：仅根据图像的透明度通道计算遮罩效果。
   • 示例：

     .element {  
       mask-mode: alpha;  
     }  
     

3. mask-position

   • 设置遮罩图像的起始位置（类似background-position），默认值为center。
   • 示例：

     .element {  
       mask-position: top left;  
     }  
     

4. mask-size

   • 控制遮罩图像的尺寸（类似background-size），默认值为auto。
   • 常用值：cover、contain、具体数值（如50%）。
   • 示例：

     .element {  
       mask-size: cover;  
     }  
     

5. mask-repeat

   • 设置遮罩是否重复（类似background-repeat），默认值为repeat。
   • 常用值：no-repeat、repeat-x、repeat-y。

三、mask属性的简写用法
语法与background类似，例如：

.element {  
  mask: url(mask.png) center/cover no-repeat;  
}  

四、实际应用示例

1. 使用渐变遮罩创建淡出效果

   .fade-element {  
     mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);  
     mask-mode: luminance; /* 可省略，默认值 */  
   }  
   

   • 效果：元素左右边缘逐渐透明，中间内容完全显示。

2. 使用SVG图形作为遮罩

   • SVG遮罩代码（保存为circle-mask.svg）：

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">  
       <circle cx="50" cy="50" r="40" fill="white"/>  
     </svg  
     

   • CSS应用：

     .circle-mask {  
       mask-image: url(circle-mask.svg);  
       mask-size: contain;  
       mask-repeat: no-repeat;  
     }  
     

   • 效果：元素仅显示圆形区域内的内容。

五、浏览器兼容性与注意事项

1. 现代浏览器普遍支持mask，但需前缀（如-webkit-mask）确保兼容性。
2. 遮罩图像需遵循同源策略，跨域图像可能导致遮罩失效。
3. 若遮罩图像加载失败，元素会完全显示（等同于无遮罩）。

六、与clip-path的区别

• clip-path：直接裁剪元素几何形状，裁剪区域外完全不可见（无过渡效果）。
• mask：基于透明度控制显示，支持半透明过渡，更适合柔化边缘或复杂透明度效果。

通过以上步骤，你可以灵活运用mask属性实现动态遮罩、渐变隐藏等高级视觉效果。