mask

Introduction

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

Constituent properties

This property is a shorthand for the following CSS properties:

  • mask-clip
  • mask-image
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size

Syntax

/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png); /* Pixel image used as mask */

/* Combined values */
mask: url(mask.png) 40px 20px; /* Pixel image used as mask positioned 40px from the top and 20px from the left */
mask: url(mask.png) 0 0/50px 50px; /* Pixel image used as mask with a width and height of 50px */
mask: url(mask.png) repeat-x; /* Pixel image used as horizontally repeated mask */
mask: url(mask.png) stroke-box; /* Pixel image used as mask extending to the box enclosed by the stroke */

/* Multiple masks */
mask:
  url(masks.png) left / 16px repeat-y,
  /* Pixel image is used as a mask on the left-hand side with a width of 16px */
    url(masks.png) right / 16px repeat-y; /* Pixel image is used as a mask on the right-hand side with a width of 16px */

Values

<mask-reference>

Sets the mask image source. See mask-image.

<position>

Sets the position of the mask image. See mask-position.

<bg-size>

Sets the size of the mask image. See mask-size.

<repeat-style>

Sets the repetition of the mask image. See mask-repeat.

<geometry-box>

If only one <geometry-box value is given, it sets both mask-origin and mask-clip. If two <geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip.

<geometry-box> | no-clip

Sets the area that is affected by the mask image. See mask-clip.

Formal definition

Initial valuesas each of the properties of the shorthand:
  • mask-image: none
  • mask-repeat: repeat
  • mask-position: center
  • mask-clip: border-box
  • mask-origin: border-box
  • mask-size: auto
Applies toViews only. It may work on some other elements, but it is recommended that only use it on <view>
InheritedNo
Percentagesas each of the properties of the shorthand:
  • mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)
Creates stacking contextyes

Formal Syntax

mask = 
  <mask-layer>#  

<mask-layer> = 
  <mask-reference>               ||
  <position> [ / <bg-size> ]?    ||
  <repeat-style>                 ||
  <box>                          ||
  <compositing-operator>         ||
  <masking-mode>                

<mask-reference> = 
  none       |
  <image>    

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

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

<position> = 
  [ left | center | right ] && [ top | center | bottom ]            |
  [ left | center | right | <length-percentage> ] 
    [ top | center | bottom | <length-percentage> ]?                |
  [ [ left | right ] <length-percentage> ] &&
    [ [ top | bottom ] <length-percentage> ]  

<bg-size> = 
  [ <length-percentage> | auto ]{1,2}  |
  cover                                |
  contain                              

<repeat-style> = 
  repeat-x                             |
  repeat-y                             |
  [ repeat | space | round | no-repeat ]{1,2}  

<box> = 
  border-box     |
  padding-box    |
  content-box    

<compositing-operator> = 
  add        |
  subtract   |
  intersect  |
  exclude    

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

<length-percentage> = 
  <length>      |
  <percentage>  

Difference with the Web

  1. mask-type not supported in Lynx.
  2. mask-image not support SVG reference.
  3. only support border-box, padding-box and content-box.

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.