наложить размытие на изображение

[cyklop77]

помогите пожалуйста решить проблему

 

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

 

я пытался решить проблему, применив фотошоповский фильтр "размытие по гауссу" к зелёному фону из исходника. так же пробовал применить css-свойство filter. в результате не решил проблему(есть эффект наложения зелёного стекла, но нет именно размытия). вот jsfiddle

Edited February 12, 2015 by cyklop77

[Sergik+]

Есть подозрение что картинку не видит фильтр, попробуйте через img кинуть.

Edited February 12, 2015 by Sergik+

[cyklop77]

Есть подозрение что картинку не видит фильтр, попробуйте через img кинуть.

спасибо, но это как мёртвому припарки. сами же писали, что свойство filter только ie понимает)

Edited February 12, 2015 by cyklop77

[ShumNo]

вряд ли мой вариант подойдет, но может просто накладывать заранее подготовленную картинку?  то есть размываем как надо + прозрачность
если конечно это реально... я не знаю

[cyklop77]

вряд ли мой вариант подойдет, но может просто накладывать заранее подготовленную картинку?  то есть размываем как надо + прозрачность

если конечно это реально... я не знаю

да я рад бы так делать, но картинки при каждом обновлении экрана будут новые

Edited February 12, 2015 by cyklop77

[Sergik+]

А я понял в чем прикол, блур на самом деле срабатывает но на блок с опасити, надо применять

именно к изображению. Размываете не тот элемент.

Edited February 12, 2015 by Sergik+

[ows.nightwolf]

Интересную тему вы создали, правда в следующий раз по возможности код свой упрощайте, а то много времени уходит чтоб разобрать что у вас там к чему. Вот мой вариант решения задачи (я убрал элементы sk_meta1_outer и sk_meta1 за ненадобностью). Проблема состояла в том, что размыть можно только сам элемент и то что внутри него, но не то что под ним. По этому можно сделать небольшую хитрость - поверх картинки положить еще один элемент нужных размеров, у которого фоном будет назначена эта же самая картинка и размывать его. У меня этот элемент - sk_meta2:before.

[cyklop77]

Интересную тему вы создали, правда в следующий раз по возможности код свой упрощайте, а то много времени уходит чтоб разобрать что у вас там к чему. Вот мой вариант решения задачи (я убрал элементы sk_meta1_outer и sk_meta1 за ненадобностью). Проблема состояла в том, что размыть можно только сам элемент и то что внутри него, но не то что под ним. По этому можно сделать небольшую хитрость - поверх картинки положить еще один элемент нужных размеров, у которого фоном будет назначена эта же самая картинка и размывать его. У меня этот элемент - sk_meta2:before.

спасибо за интересное решение, но оно даже в FF не работает( хотелось бы чтобы как минимум в хроме и FF размывало

Edited February 13, 2015 by cyklop77

[Galaxy]

ну можно попробовать такой штукой поиграться http://blurjs.com/

[cyklop77]

а ни у кого нету кусочка .png (бесцветного), который размывает всё что под ним? теоретически такое в фотошопе возможно сделать, но я не умею

уффф.. вот пацаны помогли с решением http://jsfiddle.net/fr4wh935/9/

во всех браузерах не проверял, но в хроме и фф размывает

Edited February 13, 2015 by cyklop77

[ows.nightwolf]

спасибо за интересное решение, но оно даже в FF не работает( хотелось бы чтобы как минимум в хроме и FF размывало

 

Странно. У меня FF 35 и Хром размывают, другие не проверял. Сделано вроде с применением тех же свойств что и у вас, просто другие элементы размывались.

Edited February 13, 2015 by ows.nightwolf

[cyklop77]

 

спасибо за интересное решение, но оно даже в FF не работает( хотелось бы чтобы как минимум в хроме и FF размывало

 

Странно. У меня FF 35 и Хром размывают, другие не проверял. Сделано вроде с применением тех же свойств что и у вас, просто другие элементы размывались.

 

ну я то известный криворук