web-dev-qa-db-ja.com

フィルター：blur（1px）; Firefox、Internet Explorer、およびOperaでは機能しません

CSSに問題があります。しようとすると

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

safariやChromeでは完璧に見えますが、Firefox、Opera、Internet Explorerではぼかしはまったく現れません。それらのブラウザーはサポートしていますか？または、ページ全体をぼかす別の方法がありますか？

cssinternet-explorerfirefoxbrowseropera
29
Thomas Lai

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>
43
Arpad Bajzath
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');
14
rostber

これは、すべてのブラウザーで機能する新しいぼかしテクニックです（Internet Explorer 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>

デモ： http://codepen.io/rkogan/pen/jPdGoM/

8
Rob Kogan

上記のすべての方法を試してみましたが、いつものようにInternet Explorer/Microsoft Edgeは別のことをしたかったので、一貫性を保つことができませんでした。

最終的に、一連のフープをジャンプして、最新のすべてのブラウザーで必要な機能を実現する必要がありました。

  1. IEに使用しなければならなかった修正のオーバーヘッドなしで、IE以外のブラウザーで動作するように、既に説明したCSSを使用します。

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

  2. this JavaScript （マリオに感謝）を使用して、Internet Explorer/Microsoft Edgeが使用されていたかどうかを検出します。

  3. Internet Explorer/Microsoft Edgeが検出された場合、ページ上の非表示のimgフィールドに画像をロードします。 onload関数を使用してこれを行う必要があります 画像がロードされていることを確認してください 操作する前にそれ以外の場合、次のステップは失敗します（Josh Stodolaに感謝）：

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

  4. StackBlur JavaScriptを使用して、IEおよびEdge（Mario Klingemannに感謝）で動作します。画像は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. たまたま、背景として設定したかったので、データを設定する前に画像を変換する必要がありました（ありがとう ser381747 ）：

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

  6. ロードしてぼかした後、jQuery fadeToが見栄えがよくなかったので CSSと透明度クラスを使用 でフェードインしました（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>
6
SharpC

それは正しいことのように聞こえますが、現在以下でサポートされています

  • Chrome 18+
  • Chrome for Android 25+
  • Safari 6以降
  • iOS Safari 6以降
  • BlackBerryブラウザ10+

参照

ここに記事があります Internet Explorer固有のフィルター（例：t motion blur）に関するDavid Walsh（Mozillaで働いています）から：

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

ただし、Internet Explorerでは通常のぼかしのサポートが不完全であるように見えますが、特に9以前では驚かされません。

3
Daniel Imms

GeckoベースのブラウザーでSVGぼかしフィルターを実行できます。しかし、上記のものはWebKitのみであり、標準化されていないため、他の誰もそれをサポートしていません。

1
Boris Zbarsky