`flood-opacity` CSS-свойство

Свойство flood-opacity CSS задаёт непрозрачность текущей подобласти примитива фильтра в элементах <feFlood> и <feDropShadow> внутри <filter>. Если оно указано, то переопределяет атрибут flood-opacity элемента.

Значение свойства влияет на альфа-канал свойства flood-color: оно может увеличить прозрачность flood-color, но не может сделать цвет, заданный свойством flood-color, более непрозрачным.

Синтаксис

/* numeric and percentage values */
flood-opacity: 0.2;
flood-opacity: 20%;

/* Global values */
flood-opacity: inherit;
flood-opacity: initial;
flood-opacity: revert;
flood-opacity: revert-layer;
flood-opacity: unset;

Значения

Значение <opacity-value> — это <number> или <percentage>, задающее непрозрачность элемента SVG-градиента <flood>.

<number>

Числовое значение от 0 до 1 включительно.

<percentage>

Процентное значение от 0% до 100% включительно.

При значении 0 или 0% заливка полностью прозрачна. При значении 1 или 100% элемент имеет полную непрозрачность значения flood-color, которое может быть как частично прозрачным, так и непрозрачным.

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

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

flood-opacity = 
  <'opacity'>

Примеры

Задание непрозрачности заливки фильтра

В этом примере показан основной вариант использования flood-opacity и то, как свойство CSS flood-opacity имеет приоритет над атрибутом flood-opacity.

HTML

У нас есть SVG с несколькими элементами <filter>, каждый из которых содержит дочерний элемент <feFlood>. <feFlood> задают фильтры как seagreen: первый объявлен с помощью атрибута flood-opacity как полностью непрозрачный, а второй — как полностью прозрачный. Мы добавили два элемента <rect>, каждый с атрибутом фильтра.

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="seagreen" flood-opacity="1" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" flood-opacity="0" />
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

С помощью CSS задаём height, width, x и y для позиционирования прямоугольников, а также добавляем повторяющийся линейный градиент в качестве background-image для SVG, чтобы непрозрачность цвета заливки была заметнее:

svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #cccccc 0px 10px
  );
}
rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}
#r2 {
  x: 150px;
}

Затем задаём элементам <feFlood> разные значения непрозрачности заливки с помощью свойства CSS flood-opacity:

#flood1 feFlood {
  flood-opacity: 0.5;
}
#flood2 feFlood {
  flood-opacity: 90%;
}

Результаты

Атрибуты задали первому квадрату полную непрозрачность, а второму — полную прозрачность, но эти значения были переопределены значениями CSS flood-opacity. Непрозрачность заливок цвета seagreen составляет 50% и 90% соответственно.

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

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

См. также

• flood-color
• fill
• stop-opacity
• stroke-opacity
• opacity
• box-shadow
• text-shadow
• <filter-function>, включая opacity()
• Атрибут SVG flood-opacity