paint()

Ограниченное использование

Эта функция не относится к Baseline, так как она не работает во всех широко используемых браузерах.

Функция paint() CSS функция определяет значение <image>, сгенерированное с помощью PaintWorklet.

Синтаксис

paint(workletName, ...parameters)

где:

workletName: Имя зарегистрированного worklet.
parameters Необязательно: Необязательные дополнительные параметры для передачи paintWorklet.

Примеры

Базовое использование paint() в CSS

Учитывая следующий HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item N</li>
</ul>

В JavaScript мы регистрируем paint worklet:

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
);

В CSS мы определяем background-image как тип paint() с именем worklet, boxbg, вместе с любыми переменными (например, --boxColor и --widthSubtractor), которые будут использованы worklet:

body {
  font: 1.2em / 1.2 sans-serif;
}
li {
  background-image: paint(boxbg);
  --boxColor: hsl(55 90% 60%);
}

li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60%);
  --widthSubtractor: 20;
}

li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60%);
  --widthSubtractor: 40;
}

paint() в CSS с параметрами

Вы можете передать необязательные аргументы в функцию CSS paint(). В этом примере мы передали два аргумента, которые управляют тем, является ли background-image на группе элементов списка filled или имеет stroke обводку, и width этой обводки:

body {
  font: 1.2em / 1.2 sans-serif;
}

li {
  --boxColor: hsl(55 90% 60% / 100%);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 100%);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 100%);
  background-image: paint(hollowHighlights, stroke, 1px);
}

Мы включили пользовательскую свойство в блок селектора, определяющий boxColor. Пользовательские свойства доступны для PaintWorklet.

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

Спецификация
CSS Painting API Уровень 1 # paint-notation

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`paint`	65	79	Нет	52	Нет	65	Нет	47	Нет	9.2	65
`additional_parameters`	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

© 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/image/paint