mask-image#

#Introduction

The mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element.

#Syntax

/* 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);

#Values

#none

This keyword is interpreted as an opaque white image layer.

#<image>

An image value used as mask image layer.

#Formal Definition

#Formal Syntax

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
>

#Difference with the Web

1. SVG element is not supported. Only bitmap url or gradient is supported.
2. image() function is not supported.
3. <url()> supports url() function only.
4. global value are not supported (e.g. inherit, unset, init and etc).

#Compatibility

LCD tables only load in the browser