31

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 ではぼやけはまったく表示されません。それらのブラウザはそれをサポートしていますか? または、ページ全体をぼかす別の方法はありますか?

4

6 に答える 6

17 
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');
于 2014-10-23T10:09:53.527 に答える
7

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

最終的には、最新のすべてのブラウザーで希望どおりに機能させるために、一連のフープをジャンプする必要がありました。

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

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

  2. この JavaScriptを使用して Internet Explorer / Microsoft Edge が使用されていたかどうかを検出します(thanks Mario)。

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

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

  6. ロードしてぼかしたら、CSS と透明度クラスを使用してフェード インしました。jQueryfadeToは見栄えがよくなかったからです (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>

于 2016-11-10T16:20:10.497 に答える
3

それは正しいように聞こえますが、現在サポートされているのは次のとおりです。

  • クローム 18+
  • Android 25 以降の Chrome
  • サファリ 6+
  • iOS サファリ 6+
  • BlackBerry ブラウザ 10+

参照

これは、モーション ブラーなどの Internet Explorer 固有のフィルターに関する David Walsh (Mozilla で働く)の記事です。

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

ただし、通常のぼかしのサポートは Internet Explorer ではまだらのように見えますが、特に 9 より前のバージョンでは驚くことではありません。

于 2013-04-04T05:28:07.343 に答える
1

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

于 2013-04-04T06:23:47.483 に答える