CSS-свойство `shape-image-threshold`

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

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

Попробуйте

shape-outside: linear-gradient(
  50deg,
  rgb(77 26 103),
  transparent 80%,
  transparent
);
shape-image-threshold: 0.2;

shape-outside: linear-gradient(
  50deg,
  rgb(77 26 103),
  transparent 80%,
  transparent
);
shape-image-threshold: 0.4;

shape-outside: linear-gradient(
  50deg,
  rgb(77 26 103),
  transparent 80%,
  transparent
);
shape-image-threshold: 0.6;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o'clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up "ballooning"
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of "automobiling" at a breakneck speed, the
    members of the "Aéro Club" now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  height: 150px;
  margin: 20px;
  background-image: linear-gradient(
    50deg,
    rgb(77 26 103),
    transparent 80%,
    transparent
  );
}

Синтаксис

/* <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 (полностью непрозрачный) ограничиваются этим диапазоном.

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

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

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-фигуры
• Обзор CSS-фигур
• <basic-shape>
• shape-outside
• shape-margin