CSS Blur в IE 11

Я часами пытался получить эффект размытия css в IE 11 и не добился никакого прогресса. Я пробовал использовать следующий простой HTML:

 <!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            .blur{
                -ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50');
            }
        </style>
    </head>
    <body>

        <img src='http://img3.wikia.nocookie.net/__cb20120627075127/kirby/en/images/0/01/KDCol_Kirby_K64.png' class="blur" />
    </body>

</html>

Я также пробовал использовать фильтр без префикса ms. Я видел этот код фильтра на http://jsbin.com/ulufot/31/edit и даже обращался к примеру Microsoft http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm, который не работает в моем IE 11 на Win7. У вас есть идеи, что я мог сделать не так?

вероятно, интересно, если вы тоже боретесь: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm


filter blur css internet-explorer internet-explorer-11
person Geru    schedule 15.09.2014    source источник

Ответы (2)


arrow_upward
18
arrow_downward

Согласно этому блогу (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) фильтр размытия был удален после IE9:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

Они дали решение под названием StackBlur (с использованием JavaScript и Canvases):

http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Он представляет собой надстройку javascript, которую можно загрузить с этого сайта.

person Jeff Clayton    schedule 15.09.2014
comment
Не могли бы вы объяснить, как использовать этот скрипт? Для этого нет хорошего учебника. - person Oliver; 31.07.2015
comment
Вы пробовали пример исходного кода, который они предоставляют? Они также показывают на странице три простые команды - простые однострочные. Использование: stackBlurImage (sourceImageID, targetCanvasID, radius, blurAlphaChannel); или: stackBlurCanvasRGBA (targetCanvasID, top_x, top_y, width, height, radius); или: stackBlurCanvasRGB (targetCanvasID, top_x, top_y, ширина, высота, радиус); - person Jeff Clayton; 31.07.2015
comment
Они взяты с предоставленной страницы: quasimondo.com/StackBlurForCanvas/StackBlurDemo.html - person Jeff Clayton; 31.07.2015
comment
Я не понимаю этих примеров. Что такое blurAlphaChannel? Я хочу сделать «Размытие Div», а не изображение, возможно ли это в IE 11 ?? Пожалуйста помоги - person Oliver; 31.07.2015
comment
RGB (красный, зеленый, синий) - Alpha: прозрачность - person Jeff Clayton; 01.08.2015

arrow_upward
8
arrow_downward

Вот решение, которое работает в IE10 + с использованием SVG: https://jsfiddle.net/joegeringer/g97e26pa/8/

<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />

</svg>
person joegeringer    schedule 02.03.2017
comment
@JeffClayton Эти ссылки предназначены просто для демонстрации кода здесь, LoremPixel.com возвращает случайные изображения указанных размеров. - person jarodsmk; 27.09.2017
comment
Это потрясающе! - person Jeff Clayton; 27.09.2017
comment
Имейте в виду: вы не можете использовать это SVG-изображение со связанным изображением в качестве фона, например body { background-image: url(blurred.svg); }, даже если вы встроили его через url("data:image/svg+xml;base64,CODE") trick, например. эту услугу - person izogfif; 04.10.2017