Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

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() 引用或渐变。

形式定义

初始值none
适用元素view only
是否支持继承no
是否支持动画

形式语法

mask-image =
<mask-reference
  >#

  <mask-reference>
    = none |
    <image>
      <image>
        =
        <url>
          |
          <gradient>
            <url>
              =
              <url()>
                <url()> = url( <string>) </string></url()></url()
              ></url
            ></gradient
          ></url
        ></image
      ></image
    ></mask-reference
  ></mask-reference
>

与 Web 的区别

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

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。