Filter: blur (1px); не работает в firefox, IE и opera

Ответ 1

Попробуйте использовать фильтр SVG.

img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

<img src="https://i.stack.imgur.com/oURrw.png" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

Ответ 2

filter: blur(3px);
-webkit-filter: blur(3px);
-ms-filter: blur(3px);
filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='3'%20/></filter></svg>#blur");
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); 

Ответ 3

Вот новый метод размытия, который работает во всех браузерах (включая IE 10/11) и не требует фильтров, холстов или javascript.

Основной метод - уменьшить размер изображения, а затем использовать матрицу 3D-масштабирования для родителя, чтобы увеличить масштаб до полного размера. Это эффективно уменьшает изображение и делает грубый эффект размытия.

body {
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
}

.container {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
}

#image {
  background-image: url('http://i.imgur.com/HoWL6o3.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
}

#image.blur {
  transform: matrix3d(1, 0, 0, 0,
                      0, 1, 0, 0,
                      0, 0, 1, 0,
                      0, 0, 0, 0.05);
  background-size: 0 0;
}

#image.blur:before {
  transform: scale(0.05);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';  
  background-image: inherit;
  background-size: contain;
  background-repeat: inherit;
}

<div class="container">
  <div id="image" class="blur"></div>
</div>

Ответ 4

Я пробовал все вышеперечисленные методы, но, как обычно, Internet Explorer/Microsoft Edge хотел делать что-то по-другому, поэтому я не мог его согласовать.

В конце концов мне пришлось перепрыгнуть через ряд обручей, чтобы заставить его работать так, как хотелось во всех современных браузерах:

• Использовать уже упомянутый CSS, чтобы он работал над браузерами, отличными от IE, без накладных расходов на исправление, которое я должен был использовать для IE:

  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  

• Определите, использовался ли Internet Explorer/Microsoft Edge с помощью этого JavaScript (спасибо Марио).

• Если обнаружен Internet Explorer/Microsoft Edge, загрузите изображение в скрытое поле img на странице. Вы должны сделать это, используя функцию onload, чтобы убедиться, что изображение загружено, прежде чем работать с ним, иначе следующий шаг завершится неудачно (спасибо Джошу Стодоле):

  var img = new Image();
  img.onload = function() { blurTheImage(); }
  img.src = "http://path/to/image.jpg";
  

• Используйте StackBlur JavaScript, который работает на IE и Edge (спасибо Марио Клингеманну). Изображение должно быть доступно CORS.

HTML:

    <div id="ie-image-area" style="display: none;">
        <img id="ie-image"/>
        <canvas id="ie-canvas"></canvas>
    </div>

JavaScript:

function blurTheImage() {
    $("#ie-image").attr("src", "http://path/to/image.jpg");
    StackBlur.image('ie-image', 'ie-canvas', 1, false);
}

5. Как бы то ни было, я хотел установить фоновый рисунок, поэтому мне пришлось преобразовать изображение перед настройкой данных (спасибо user3817470):

   imageLinkOrData = document.querySelector('#ie-canvas').toDataURL("image/png");
   $('#background-image').css('background-image', 'url(' + imageLinkOrData + ')');
   

6. После загрузки и размытости я затем исчез в с использованием CSS и класса прозрачности, поскольку jQuery fadeTo не смотрел отлично (спасибо Rich Bradshaw):

   $('#background-image').toggleClass('transparent');
   

Фу, я думаю, мне нужен чайный перерыв (или, может быть, что-то гораздо сильнее!).

Образец работы (спасибо Alex78191):

function detectIE() {
  return navigator.userAgent.search(/MSIE|Trident|Edge/) >= 0;
}

let image = document.querySelector('#img-for-blur');
image.src = image.getAttribute('data-src');
if (detectIE()) {
  image.onload = function() {
    StackBlur.image('img-for-blur', 'ie-canvas', 4, false);
  };
} else {
  image.style.display = 'block';
}

img {
  filter: blur(4px);
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.0/stackblur.js"></script>
<img id="img-for-blur" data-src="https://i.stack.imgur.com/oURrw.png">
<canvas id="ie-canvas"></canvas>

Ответ 5

Звучит правильно, он поддерживается текущим:

• Chrome 18 +
• Chrome для Android 25 +
• Safari 6 +
• iOS Safari 6 +
• Blackberry browser 10 +

Ссылка

Вот статья от Дэвида Уолша (работает в Mozilla) на IE-фильтрах, например t motion blur

.blur { filter:blur(add = 0, direction = 300, strength = 10); }

Похоже, что обычная размытость поддержки неоднозначна с IE, хотя я не удивлен, особенно pre-9.

Ответ 6

Вы можете использовать фильтр размытия SVG в браузерах на базе Gecko. Но то, что у вас есть, это только WebKit и не стандартизировано, поэтому никто не поддерживает его.