mask-image

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

**mask-image** CSS 属性设置用作元素遮罩层的图像。默认情况下，这意味着遮罩图像的 alpha 通道将与元素的 alpha 通道相乘。这可以通过 mask-mode 属性进行控制。

语法

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

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

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

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

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

Values

none

此关键字被解释为透明的黑色图像层。

<mask-source>

对 <mask> 或 CSS 图像的 url() 引用。

注意： 由于 CORS 策略，仅接受通过 HTTP 和 HTTPS 协议提供的图像源。本地提供的图像，包括相对或绝对 file:// 协议，不被接受。要本地测试 URL 图像源，设置本地服务器。

<image>

用作遮罩图像层的图像值。

在以下情况下，遮罩被计为透明的黑色图像层

  • 遮罩图像为空（宽度或高度为零）
  • 遮罩图像下载失败
  • 浏览器不支持遮罩图像格式
  • 遮罩图像不存在
  • 遮罩值不指向遮罩图像

正式定义

初始值none
适用于所有元素；在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素
继承否
计算值如指定，但使用 url() 值使其绝对
动画类型离散

正式语法

mask-image = 
  <mask-reference>#  

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

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

使用 URL 和渐变设置遮罩图像

html
<div class="masked"></div>
css
.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;

  background: red;
  mask-image: url(star.svg), radial-gradient(transparent 50%, black);
}

规范

规范
CSS 遮罩模块级别 1
# the-mask-image

浏览器兼容性

BCD 表格只在浏览器中加载

参见