brightness()

amount

Яркость задается как <number> или <percentage>. Значение меньше 100% затемняет входное изображение или элемент, а значение больше 100% делает его ярче. Значение 0% создаёт полностью чёрное изображение или элемент, а значение 100% оставляет входной элемент без изменений. Другие значения между 0% и 100% имеют линейный множительный эффект. Допускаются значения больше 100%, что обеспечит более яркий результат. Начальное значение для интерполяции равно 1. Отрицательные значения недопустимы. Значение по умолчанию, если ничего не указано, равно 1.

Ниже приведены пары эквивалентных значений:

brightness(0) /* Brightness is reduced to zero, so input turns black */
brightness(0%)

brightness(0.4) /* Brightness of input is reduced to 40%, so input is 60% darker */
brightness(40%)

brightness(1) /* Brightness of input is not changed */
brightness(100%)

brightness(2) /* Brightness of input is doubled */
brightness(200%)

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

В этом примере показано, как применить фильтр brightness() к абзацу с помощью свойства backdrop-filter CSS.

CSS

.container {
  background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px #ffffff;
}

Результат

В этом примере цвета в области за элементом <p> изменяются линейно. Если бы свойство backdrop-filter было установлено в значение brightness(0%), область <div> с элементом <p> была бы чёрной и скрывала бы изображение позади него. При значении brightness(100%), цвет области <div> был бы таким же, как у входного изображения #d4d5b2, и изображение позади стало бы полностью прозрачным. При установке яркости в значение 150% (как в этом примере), цвета изображения позади скрываются из-за яркости элемента <div>.

В этом примере фильтр brightness() применяется ко всему элементу, включая содержимое, границы и изображение фона, через свойство filter CSS. Результат демонстрирует три варианта с различными значениями яркости.

p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}

Элемент SVG <filter> используется для определения пользовательских эффектов фильтра, которые затем можно ссылаться с помощью id. Примитив <feComponentTransfer> элемента <filter> позволяет переопределять цвета на уровне пикселей.

В этом примере, чтобы создать фильтр, который затемнит содержимое, на которое он применяется, на 25% (т. е. 75% от исходной яркости), атрибут slope устанавливается в значение 0.75. Затем мы можем сослаться на фильтр с помощью id.

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

<svg role="none">
  <filter id="darken25" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.75" />
      <feFuncG type="linear" slope="0.75" />
      <feFuncB type="linear" slope="0.75" />
    </feComponentTransfer>
  </filter>
</svg>

Следующие объявления производят похожие эффекты:

filter: brightness(75%);
filter: url(#darken25); /* with embedded SVG */
filter: url(folder/fileName.svg#darken25); /* external svg filter definition */

На изображениях ниже первое изображение имеет применённую функцию фильтра brightness(), второе — похожую функцию яркости SVG, а третье — исходное изображение для сравнения.

• Модуль эффектов CSS фильтра
• Другие функции <filter-function>, доступные для использования в значениях свойств filter и backdrop-filter включают:
  • blur()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()