Маска, которая размывает содержимое за ней

Question

Как чисто эстетическая конструкция, мне интересно, можно ли иметь элемент с непрозрачным фоном, чтобы размыть содержимое за ним.

Более конкретно, когда у меня появляется модальное поле (как часть моего настраиваемого оповещения/подтверждения/подсказки), в настоящее время фоновое содержимое «затушевывается», если на экране отображается тот же цвет, что и фон документа ,

Что бы я хотел сделать, это применить небольшое количество размытия (всего несколько пикселей) к замаскированному контенту, чтобы дополнительно обратить внимание на модальный блок.

Совместимость с браузером не является проблемой, поскольку, как я уже говорил, это чисто эстетично. Желательно, чтобы он работал в IE9 как минимум, и Chrome, если это возможно.

Также, нет jQuery. Во что бы то ни стало, дайте ответ в jQuery, если хотите, но я буду переводить его в raw JS, прежде чем позволить ему приблизиться к моему сайту.

Answer 1

Не возможно с чистым CSS ..

• Вы можете использовать (с его ограничениями) html2canvas script для отображения страницы на холсте.
• Затем размыть этот образ или часть, которую вы хотите с http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
• Используйте toDataUrl, чтобы получить изображение и использовать его в качестве фона для вашего всплывающего окна ...

Это довольно сложный процесс и требует много javascript, но я считаю, что это единственный способ сделать это ...

Answer 2

Для этого потребуется javascript (и довольно сложный javascript).

Из того, что я понимаю, похоже, что вы пытаетесь создать эффект «Aero glass», когда контент за полупрозрачным элементом получает размытый эффект. Это невозможно с использованием только HTML и CSS (если вы не используете IE-only filters).

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

Answer 3

Решение html2canvas, представленное Габи, потенциально может быть излишним. Вы можете получить тот же эффект с iframe того же веб-сайта, который был размыт (через размытие фильтра или другой метод - «-webkit-filter: blur (2px)» работает только в хромированном состоянии, насколько мне известно.

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

См. (Только хром) Пример здесь: https://s3.amazonaws.com/blur-demo/index.html