mask-image

Baseline 2023

Новое

С декабря 2023 года эта функция работает во всех последних версиях браузеров и устройств. Возможно, она не будет работать на старых устройствах или браузерах.

Свойство mask-image CSS задаёт изображение, используемое как слой маски для элемента. По умолчанию это означает, что альфа-канал изображения маски будет умножаться на альфа-канал элемента. Это можно контролировать свойством mask-mode.

Синтаксис

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

Значения

none: Это ключевое слово интерпретируется как прозрачный чёрный слой изображения.
<mask-source>: Ссылка <url> на <mask> или на изображение CSS.

Примечание: Принимаются только источники изображений, предоставляемые по протоколам HTTP и HTTPS из-за политики CORS. Изображения, предоставляемые локально, включая относительные или абсолютные 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 и градиентом

<div class="masked"></div>

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;

  background: red;
  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg),
    radial-gradient(transparent 50%, black);
}

Спецификации

Спецификация
CSS Masking Module Level 1 # the-mask-image

Совместимость браузеров

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`mask-image`	120 1 С версии 8 Chrome добавил поддержку значений градиента. Изначально Chrome поддерживал только значения градиента с префиксом (такие как `-webkit-`). Позже была добавлена поддержка значений без префиксов.	1207916–79	53	15	15.4 4 Изначально Safari поддерживал только значения градиента с префиксом (такие как `-webkit-`). Позже была добавлена поддержка значений без префиксов.	120 18 С версии 8 Chrome добавил поддержку значений градиента. Изначально Chrome поддерживал только значения градиента с префиксом (такие как `-webkit-`). Позже была добавлена поддержка значений без префиксов.	53	14	15.4 3.2 Изначально Safari поддерживал только значения градиента с префиксом (такие как `-webkit-`). Позже была добавлена поддержка значений без префиксов.	1.0	2 Изначально Android поддерживал только значения градиента с префиксом (такие как `-webkit-`). Позже была добавлена поддержка значений без префиксов.
`multiple_mask_images`	1	18	53	15	4	18	53	14	3.2	1.0	4.4
`svg_masks`	8	18	53	15	4	18	53	14	3.2	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image