В интернете много решений, я попробовал, наверное, все :) Основная проблема — не удаётся достичь кросс-браузерности. Как всегда, отличился IE.
Для всех новых браузеров, кроме IE, для включения эффекта размытия достаточно подключить такой стиль :
|
1 2 3 4 |
.blur-effect { -webkit-filter: blur(5px); /* Chrome, Opera*/ filter: blur(5px); /* FF */ } |
В данном примере мы размываем изображение фона, используя 5 соседних точек.
Чтобы задействовать эффект в IE, мы начинаем танцы с бубном и хороводы с медведями. Вот такая комбинация работает для нормальных браузеров и IE версий ниже 10:
|
1 2 3 4 5 |
.blur-effect-IE-early { -webkit-filter: blur(5px); filter: blur(5px); filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius='5'); } |
Как известно, в поздних версиях они (парни из майкрософт) отказались от поддержки собственных извращений. Было бы логично, что они включили поддержку того, что описывает спецификация CSS3, но нет.
А звуки бубна влекут нас дальше. Попробуем задействовать фильтры, используя svg формат. Для этого мы создаём файл filters.svg следующего содержания:
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" standalone="no"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5" in="SourceGraphic" color-interpolation-filters="sRGB"></feGaussianBlur> </filter> </defs> </svg> |
А дальше используем вот такой CSS стиль:
|
1 2 3 |
.blur-effect-svg { filter: url(filters.svg#blur); } |
Т.е. мы ссылаемся на svg-файл, уточная id, используемого фильтра. Такой вариант сработал только для FF. Я полагаю, что в IE какая то проблема с определением местоположения файла, так как с SVG форматом он должен дружить очень хорошо. Чтобы убедиться в этом, разместим svg внутри html кода, а картинку внутри svg (яйцо в утке, утка в сундуке….).
Для конкретики, я использовал вот такую картинку с красивым видом на закат над озером.
И конкретно для этой картинки получим следующий кусочек HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<svg version="1.1" height=263 width=400 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5" color-interpolation-filters="sRGB"></feGaussianBlur> </filter> </defs> <image xlink:href="/wp-content/uploads/2015/12/lakeview-gory-i-pomostok.jpg" width=400 height=263 filter="url(#blur)"></image> </svg> |
Обратите внимание, что контейнер SVG имеет размеры, а картинка использует свойство filter, чтобы сослаться на описанный внутри контейнера эффект blur.
Этот пример у меня сработал под всем набором браузеров (FF, Chrome, Opera и IE 10, IE Edge).
