mask-image

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概要

mask-image CSS属性用于设置元素上遮罩层的图像。

初始值none
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
计算值as specified, but with url values made absolute
Animation typediscrete

语法

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

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

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

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

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

Values

none
默认值,透明的黑色图像层,也就是没有遮罩层。
<mask-source>
<mask>或 CSS 图像的 url
<image>
图片作为遮罩层

Formal syntax

mask-image = 
<mask-reference>#

<mask-reference> =
none |
<image> |
<mask-source>

<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>

<mask-source> =
<url>

<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )

<image-set()> =
image-set( <image-set-option># )

<cross-fade()> =
cross-fade( <cf-image># )

<element()> =
element( <id-selector> )

<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> (en-US) |
<radial-gradient()> |
<repeating-radial-gradient()> (en-US)

<image-tags> =
ltr |
rtl

<image-src> =
<url> |
<string>

<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>

<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]

<cf-image> =
<percentage>? &&
[ <image> | <color> ]

<id-selector> =
<hash-token>

<linear-gradient()> =
linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>

<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

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

<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<cmyk-component> =
<number> |
<percentage>

<alpha-value> =
<number> |
<percentage>

<linear-color-stop> =
<color> &&
<length-percentage>?

<linear-color-hint> =
<length-percentage>

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

<hue> =
<number> |
<angle> |
none

<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>

<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
<xyz-space> [ <number> | none ]{3}

<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020

<xyz-space> =
xyz |
xyz-d50 |
xyz-d65

例子

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

HTML

<div id="masked"></div>

Specifications

Specification Status Comment
CSS Masking Module Level 1
mask-image
Candidate Recommendation Initial definition

浏览器兼容性

BCD tables only load in the browser