CSS: обходной путь к фоновому фильтру?

Ответ 1

Используйте SVG фильтры. Они работают как шарм. Оформить заказ на этот пример CodePen.

backdrop-filter теперь поддерживается по умолчанию в Chrome Canary. Это также в списке приоритетов 2019 для разработки Firefox. Таким образом, он скоро будет поддерживаться во всех браузерах, но сейчас вы можете использовать фильтры SVG.

Обновить

Фильтры SVG не работают так же, как backdrop-filter. Это только обходной путь, и он не работает, если под ним движутся элементы. В любом случае, я думаю, что мы сможем использовать backdrop-filter в производстве очень скоро. Теперь он включен по умолчанию в Chrome Beta! Что также означает Edge.

Ответ 2

Я не знаю, будете ли вы продолжать преследовать этот вопрос, но для других пользователей в будущем:

Этот эффект может быть достигнут следующим образом с помощью псевдоклассов CSS, JavaScript не требуется! показано ниже:

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

Ответ 3

Я использую это, чтобы получить популярный эффект матового стекла. Пока кто-то успешно не изобрел хороший polyfill для backdrop-filter, я использую слегка прозрачный фон в качестве резервной копии:

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

Фильтр будет работать в в настоящее время поддерживаемых браузерах. (Safari и Chrome с возможностями экспериментальной веб-платформы включены) Код также должен работать в будущих браузерах, которые поддерживают unprefixed backdrop-filter, если спецификация не изменится до этого.

Примеры без и с поддержкой заднего фильтра:

Ответ 4

Начиная с Chrome M76, фоновый фильтр теперь поставляется без префикса и без необходимого флага.

https://web.dev/backdrop-filter/

Ответ 5

Вы можете попробовать добавить различные фильтры к фоновым изображениям:

https://css-tricks.com/almanac/properties/f/filter/

Падение на это состоит в том, что он работает только с изображениями.

В принципе, есть 10 встроенных фильтров для свойства CSS filter:

• Размытие (рх)
• Яркость (%)
• контраст (%)
• drop-shadow (h-shadow v-shadow blur spread цвет)
• полутоновое (%)
• цветовой тон поворота (град)
• инвертный (%)
• Непрозрачность (%)
• насытить (%)
• сепия (%)

Кроме того, вы можете предоставить ему URL-адрес, в котором содержится XML файл с соответствующим фильтром.