#mask-image

#简介

mask-image CSS 属性设置了用作元件蒙版层的图像。默认情况下，这意味着蒙版图像的 alpha 通道将与元件的 alpha 通道相乘。

#使用示例

css-apisrc/mask-image/App.tsx

预览

#语法

/* Keyword value */
mask-image: none;

/* <image> values */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: url(mask.png);

/* Multiple values */
mask-image: url(mask.png), linear-gradient(rgba(0, 0, 0, 1), transparent);

#取值

#none

默认值，透明的黑色图像层，也就是没有遮罩层。

#<image>

对图像的 url() 引用或渐变。

#形式定义

#形式语法

mask-image =
  <mask-reference>#

<mask-reference> =
  none       |
  <image>

<image> =
  <url()>    |
  <gradient>

<url()> =
  url( <string> )

#与 Web 的区别

1. 不支持引用 svg 中的元件。
2. 不支持使用 image() 函数.
3. 不支持使用 src() 函数设置图片。
4. 不支持全局属性值，例如 inherit, unset 等。

#兼容性