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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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