Фон в оттенках серого элемента

Класс backdrop-grayscale убирает цвет у всего, что лежит за элементом, backdrop-grayscale-none возвращает его. Берите их, чтобы приглушить пёстрый фон под панелью или диалогом.

Пример

Значения

В каждом образце рамка в центре — элемент с классом; изображение под ним меняется только внутри рамки.

<div class="grid grid-col-1 sm:grid-col-2 gap-3">
  <div class="flex flex-col gap-1">
    <div class="relative overflow-hidden radius-1 h-e4 flex items-center justify-center">
      <img class="absolute inset-0 w-full h-full object-cover" src="assets/color-study.jpg" alt="">
      <div class="relative w-2/3 h-1/2 radius-1/2 border border-outline-variant backdrop-grayscale-none"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">backdrop-grayscale-none</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="relative overflow-hidden radius-1 h-e4 flex items-center justify-center">
      <img class="absolute inset-0 w-full h-full object-cover" src="assets/color-study.jpg" alt="">
      <div class="relative w-2/3 h-1/2 radius-1/2 border border-outline-variant backdrop-grayscale"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">backdrop-grayscale</code>
  </div>
</div>

При наведении

Наведите указатель на изображение: фон за рамкой теряет цвет.

<div class="flex flex-col gap-1 items-start">
  <div class="relative overflow-hidden radius-1 w-f6 h-e8 flex items-center justify-center">
    <img class="absolute inset-0 w-full h-full object-cover" src="assets/color-study.jpg" alt="">
    <div class="relative w-2/3 h-1/2 radius-1/2 border border-outline-variant transition backdrop-grayscale-none hover:backdrop-grayscale"></div>
  </div>
  <code class="text-1/2 color-on-surface-variant">backdrop-grayscale-none hover:backdrop-grayscale</code>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — hover:. Например: hover:backdrop-grayscale.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Применение

Приглушённый фон

<div class="bg-surface-transparent-overlay backdrop-grayscale">…</div>

backdrop-grayscale-none снимает фильтр, заданный классом с префиксом состояния.

Сочетание с другими фильтрами фона

Классы разных семейств фильтра фона складываются на одном элементе; класс с hover: тоже добавляется к остальным, а не заменяет их.

<div class="bg-surface-transparent-overlay backdrop-blur-large backdrop-grayscale">…</div>

Ограничения

• Эффект виден только сквозь прозрачный или полупрозрачный фон элемента: непрозрачный фон закрывает то, что лежит за ним.
• Классы фильтра фона наследуются: элемент с классом backdrop-* внутри другого такого элемента получает и функции предка. Например, backdrop-sepia внутри backdrop-blur даёт и сепию, и размытие.
• Любое значение создаёт у элемента новый контекст наложения и содержащий блок для потомков с position: fixed.

См. также

• Монохромность элемента
• Размытие фона элемента