2016-06-11 4 views
4

質問は次のとおりです。ポップアップが開いたときに背景を表示したいが、ぼやけているようにしたい。私は画像のぼかしについて質問していない、私はページにぼかしを追加することを尋ねている、と私は現在cssのみのソリューションがあるかどうかを知りたい?IE11で背景をぼかすためのCSS専用の方法はありますか?

他にもこのような質問がありますが、その中にはJavaScriptソリューションなどのソリューションを求めている人もいれば、画像のぼかしや背景のぼかしはなく、他のものは非常に古くなっています。特徴。 stackoverflowの中の他の質問の

どれも私が求めています質問へのIE11のCSSのみのソリューションを持っていません。その後、https://github.com/niklasvh/html2canvasと挿入します。

私が知っ非CSSのソリューションは、次のとおりです。JavaScriptを使用してソリューションをhtml2canvasのようなライブラリを使用してバックグラウンドの画像を作成するにはhttp://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

  • のようなライブラリを使用し

    1. インラインsvgの中の画像を取得し、svgフィルタのぼかしを適用します。

    私がチェックされ、IE11で次の作品のどれもことを確認した:それはだ場合

    filter: blur(7px); 
    -webkit-filter: blur(7px); 
    filter: url(/images/blur.svg#blur); 
    filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='7'%20/></filter></svg>#blur"); 
    -moz-filter: blur(7px); 
    -o-filter: blur(7px); 
    -ms-filter: blur(7px); 
    /* This only works for older IE. For newer IE using javascript is suggested here: http://thenewcode.com/534/Crossbrowser-Image-Blur-with-CSS */ 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='7'); 
    

    これが不可能であることを、マイクロソフトからの誰かからの正式な答えを得るために非常に素晴らしいことはないだろう場合。

  • +0

    が、1つの要素を使用すると、ぼかし、共通のラッパーにページの内容を設定し、この他の要素がsibblingが、子に持つことを意味します。適切な接頭辞を持つ古いIEフィルタのために私はそれを知っている9 –

    +0

    @GCyrillus oをIE5tの作品と私はIE11を除くすべてのブラウザで動作している上記のコードでやったことのthatsと私は、このstackoverflowの質問を理由です。 私は、あなたがIE11でうまくいくことについて話しているその共通のラッパーにぼかしを追加する方法が必要です。私はCSS専用のソリューションを好んでいます。 –

    +0

    @ GuyL。あなたはこれに対する解決策を見つけましたか? – swenedo

    答えて

    0

    答えはノーです。ここで説明したように、Microsoftは、IE 11のために、このCSS機能をサポートしていません:、

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

    ...しかし、それはCSSのみのソリューションではありません。

    http://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS

    をあなたはこれを使用することができますIE11が使用されている場合、既にぼやけた画像を読み込むCSSではないソリューション、またはblur.png(半透明の灰色)のソリューションを除けば、ページをぼかすために

    関連する問題