Как размыть фоновое изображение в области модального окна с прозрачностью? - PullRequest
4 голосов
/ 15 декабря 2010

Я добавил модальное окно с прозрачностью на веб-сайт, и я хотел бы применить такие, как размытие по Гауссу, к фону окна, так же, как эффект аэростекла Windows Vista.Могу ли я это сделать?и как?

Спасибо!William

Ответы [ 2 ]

1 голос
/ 15 декабря 2010

Как насчет динамического виджета ширины / высоты, который загружает изображение, фильтрует размытие и довольно точно устанавливает содержащий элемент в слое z-index, над модальной подложкой и под модальным содержимым. В качестве альтернативы http://plugins.jquery.com/project/blurimage, или http://www.nihilogic.dk/labs/imagefx/ также выглядит многообещающе.

РЕДАКТИРОВАТЬ: В ответ на ваш "частичный комментарий размытия изображения"

Используя этот виджет Flash и позиционирование, да - с моей головы вы можете попробовать двухслойный SWF в полном размере, нижний слой содержит актив изображения, как и слой над ним, этот верхний слой будет полностью размыто - и верхний слой тоже замаскирован. Измените размер маски на открытую панель (при необходимости настройте несколько обработчиков одного размера и т. Д.). Если ваши панели можно перетаскивать, отслеживайте положение панели HTML в сравнении с положением второго слоя размером с панель во Flash, в конечном итоге перемещаясь вокруг маски, чтобы показать только размытую область того, что выглядит как одно изображение.

Также обратите внимание, что вам нужно ExternalInterface, чтобы это было эффективно, так что мин. Flash Player 8, который превосходит редкие реализации браузера, перечисленные в http://www.nihilogic.dk/labs/imagefx/.

На ум приходит еще одна вещь, которой могут понадобиться только два элемента <div>, каждый из которых содержит одно и то же изображение, как указано выше, расположенные друг над другом, как указано выше, и вы будете манипулировать свойствами CSS-клипа по отношению к размеру / положению вашей непрозрачной панели. Если бы это была YUI Panel , вы могли бы использовать модальный нижний слой в качестве «нижнего слоя» в моем примере Flash выше, а сама панель обернута, чтобы вы могли использовать там CSS-клип и размытие JS. , может быть, даже background-position:fixed и JS Blur могли бы помочь ... Я был бы рад увидеть некоторые из ваших попыток, если вам удастся попробовать что-нибудь - если бы у меня было немного свободного времени!

1 голос
/ 15 декабря 2010
...