CSS-функция `brightness()`

brightness() CSS <filter-function> применяет линейный коэффициент к элементу или входному изображению, делая изображение светлее или темнее.

Попробуйте

filter: brightness(1);

filter: brightness(1.75);

filter: brightness(50%);

filter: brightness(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Синтаксис

brightness(amount)

Значения

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()     /* Brightness of input is not changed */
brightness(1)
brightness(100%)

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

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

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

Примеры

Применение яркости с помощью свойства backdrop-filter

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

CSS

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

.container {
  padding: 5rem 3rem 1rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: black;
  font-size: 2rem;
  font-family: sans-serif;
}

<div class="container">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Результат

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

Применение яркости с помощью свойства filter

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

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

p {
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: palegoldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
  padding: 0.25rem;
  font-size: 1.25rem;
  font-family: sans-serif;
  width: 85vw;
}

<p>This paragraph has reduced brightness.</p>
<p>This paragraph has normal brightness.</p>
<p>This paragraph has increased brightness.</p>

Применение яркости с помощью SVG-фильтра яркости url()

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

В этом примере фильтр, затемняющий применённое к нему содержимое на 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, а третье изображение оставлено без изменений для сравнения.

<table>
  <thead>
    <tr>
      <th>Live example</th>
      <th>SVG Equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="darkened pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="darkened pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

.css-filter {
  filter: brightness(0.75);
}
.svg-filter {
  filter: url("#darken25");
}

th,
td {
  padding: 5px;
}
svg:not(:root) {
  display: none;
}

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

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

См. также

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