flood-opacity

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

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

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

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

Примечание: Свойство flood-opacity применяется только к элементам <feFlood> и <feDropShadow>, вложенным в элемент <svg>. Оно не применяется к другим элементам SVG, HTML или псевдоэлементам.

Синтаксис

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

<opacity> = 
  <opacity-value>  

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

Примеры

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

Этот пример демонстрирует базовый случай использования 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

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

svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #ccc 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% соответственно.

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

Спецификация
Модуль эффектов фильтра уровня 1 # FloodOpacityProperty

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`flood-opacity`	5	12	3	15	6	18	4	14	6	1.0	4.4

См. также

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

© 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/flood-opacity