引言

一、CSS 遮罩原理

二、CSS 遮罩属性

CSS 遮罩属性主要包括以下几个：

  1. mask-image：指定遮罩图片，可以是图片资源、线性渐变或径向渐变。
  2. mask-repeat：控制遮罩图片的重复方式，可选值有：no-repeat（不重复）、repeat（重复）、repeat-x（水平重复）、repeat-y（垂直重复）。
  3. mask-position：设置遮罩图片的位置，可以使用关键词（如：top、right、bottom、left、center）、百分比或像素值来指定。
  4. mask-clip：指定遮罩的裁剪区域，可选值有：border-box（裁剪到边框框）、padding-box（裁剪到内边距框）、content-box（裁剪到内容框）。
  5. mask-origin：设置遮罩的原点位置，可选值有：border-box（边框框）、padding-box（内边距框）、content-box（内容框）。
  6. mask-size：设置遮罩的大小，可选值有：auto（自动）、百分比、像素值、length。
  7. mask-mode：指定遮罩的混合模式，可选值有：normal（正常）、multiply（乘法）、screen（屏幕）、overlay（叠加）、darken（变暗）、lighten（变亮）。
  8. mask-composite：指定遮罩的组合模式，可选值有：source-over（源覆盖）、destination-over（目标覆盖）、source-in（源相减）、destination-in（目标相减）、source-out（源相除）、destination-out（目标相除）、source-atop（源在上）、destination-atop（目标在上）、xor（异或）。

三、CSS 遮罩应用实例

.masked-image {
  width: 500px;
  height: 300px;
  background-image: url('image.jpg');
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

四、总结