shape-image-threshold

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство shape-image-threshold CSS задаёт порог альфа-канала, используемый для выделения формы с помощью изображения в качестве значения для shape-outside.

Попробовать

Любые пиксели, значение альфа-компонента которых больше порога, считаются частью формы для определения её границ. Например, значение 0.5 означает, что форма будет охватывать все пиксели, которые имеют более чем 50% непрозрачности.

Синтаксис

/* <number> value */
shape-image-threshold: 0.7;

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

Значения

<alpha-value>: Устанавливает порог, используемый для выделения формы из изображения. Форма определяется пикселями, значение альфа-канала которых больше порога. Значения, выходящие за пределы диапазона от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный), ограничиваются этим диапазоном.

Формальное определение

Начальное значение	`0.0`
Применимо к	плавающим элементам
Наследуется	нет
Вычисленное значение	То же, что и указанное значение после ограничения `<number>` диапазоном [0,0, 1,0].
Тип анимации	число number

Формальный синтаксис

shape-image-threshold = 
  <opacity-value>  

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

Примеры

Выравнивание текста по градиенту

В этом примере создается блок <div> с изображением градиента в качестве фона. Градиент устанавливается как форма CSS с помощью shape-outside, так что пиксели внутри градиента, имеющие непрозрачность не менее 20% (то есть пиксели с альфа-компонентом больше 0,2), считаются частью формы.

HTML

<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>

CSS

#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}

Здесь форма устанавливается с помощью background-image с линейным градиентом, а не файлом изображения. Тот же градиент также используется в качестве изображения, из которого извлекается форма для определения области плавающего элемента, используя свойство shape-outside.

Порог непрозрачности 20% для обработки пикселей градиента как части формы затем устанавливается с помощью shape-image-threshold со значением 0.2.

Результат

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

Спецификация
CSS Shapes Module Level 1 # shape-image-threshold-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`shape-image-threshold`	37	79	62	24	10.1	37	62	24	10.3	3.0	37
`percentages`	78	79	70	65	Нет	78	79	56	Нет	12.0	78

См. также

© 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/shape-image-threshold