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

invert() CSS функция инвертирует цветовые образцы входного изображения. Результатом является <filter-function>.

Попробуйте

filter: invert(0);

filter: invert(0.3);

filter: invert(50%);

filter: invert(70%);

filter: invert(1);

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

Синтаксис

/* No inversion */
invert(0)

/* Complete inversion */
invert()
invert(1)
invert(100%)

/* 60% inversion */
invert(.6)
invert(60%)

Параметры

<number> или <percentage> Необязательно

Задаёт степень преобразования. Значение 100% полностью инвертирует изображение, а значение 0% оставляет входные данные без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Начальное значение для интерполяции — 0. Значение по умолчанию — 1.

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

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

Фильтр SVG

Элемент фильтра SVG <feComponentTransfer> также можно использовать для инвертирования содержимого, создав эквивалентную инверсию во вложенных табличных элементах <feFuncR>, <feFuncG> и <feFuncB>. Зададим одинаковое значение tableValue для красного, зелёного и синего примитивов фильтра, а затем сможем сослаться на эффект SVG по идентификатору элемента <filter>:

<svg role="none">
  <filter id="invert90">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.1 0" />
      <feFuncG type="table" tableValues="0.1 0" />
      <feFuncB type="table" tableValues="0.1 0" />
    </feComponentTransfer>
  </filter>
</svg>

Следующие объявления дают одинаковый эффект:

filter: invert(0.9);
filter: invert(90%);
filter: url("#invert90"); /* with embedded SVG */
filter: url("fileName.svg#invert90"); /* external SVG */

Примеры

В этом примере для сравнения показаны три изображения: изображение с применённой функцией фильтра invert(), изображение с применённой эквивалентной функцией SVG и исходное изображение:

SVG

Создадим фильтр SVG, который инвертирует содержимое, к которому он применяется, на 70%:

<svg height="0">
  <filter id="invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.3 0" />
      <feFuncG type="table" tableValues="0.3 0" />
      <feFuncB type="table" tableValues="0.3 0" />
    </feComponentTransfer>
  </filter>
</svg>

CSS

Добавим CSS, который инвертирует элементы в зависимости от их класса filter или svgFilter:

.filter {
  filter: invert(70%);
}

.svgFilter {
  filter: url("#invert");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>invert()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="svgFilter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgInvert">
            <feComponentTransfer>
              <feFuncR type="table" tableValues="0.3 0" />
              <feFuncG type="table" tableValues="0.3 0" />
              <feFuncB type="table" tableValues="0.3 0" />
            </feComponentTransfer>
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgInvert')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

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

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

См. также

Другие <filter-function> функции, которые можно использовать в значениях свойств filter и backdrop-filter:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• opacity()
• saturate()
• sepia()