Есть плагины, размывающие фон — как они работают?

Question

[Денис Букреев]

Есть много плагинов, которые размывают фон: какие-то криво, другие еше кривее, третьи все в багах.
На основе какого механизма они работают? В какую сторону смотреть?

Еще есть системное размытие macOS, которое, как я предполагаю, используется на сайте macOS - как использовать его?

Answer 1

[Александр Таратин]

https://developer.mozilla.org/ru/docs/Web/CSS/filter
Либо
html2canvas.hertzen.com
+
www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Answer 2

[_ _]

Серебрянной пули увы нет.
Есть blur в ccs3, он размывает элемент вместе с содержимым, работает медленно.
Есть backdrop-filter, который размывает конкретно то, что лежит под элементом, не трогая содержимое -поддержка на уровне экспериментальной фичи.
Насчет того, как плагины работают, если без CSS - уверен, работают они не для всякого контента, а для подготовленного. Есть трюк с двумя картинками - обычной и размазанной, когда на заднике обычная, а на элементе сверху - размазанная. За счет позиционирования элемента сверху и его бэкграунда делаем вид, что размываем изображение под нами
P.S. На сайте Apple используется backdrop-filter

Comments

[Денис Букреев]

а вот системное размытие macOS как получить?
На сайте Apple в каком-то из разделов в шапке явно оно используется. Работает быстро, не напряжно, отличается от того, что выходит в CSS и размывает даже динамичный контент

[_ _]

Денис Букреев: обновил ответ