ウェブページ上の任意の領域をぼかす方法は？

ウェブページ上の任意の領域（イメージ、要素を含むがそれに限定されない）をぼかすための実行可能な解決策はありますか？ただ、この、またはiOS上の多くのぼやけpopoversようウェブページ上の任意の領域をぼかす方法は？

：

2017-04-17 Vej

は、検索に役立つかもしれない：http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a -background-image – Slime

ぼかし領域のxとy（上、左）の位置に乱数を与え、その領域を占める要素にCSSの 'filter：blur（）'を適用するだけです。 http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image –

ポップアップの根底にあるぼかしのランダム/ダイナミックエリアは、CSSやHTML。しかし、ページ全体がぼやけている可能性があります。これをチェックして（https://jsfiddle.net/jo_Geek/1t1c6kpp/）、下にスクロールしてボタンをクリックしてアラートを表示してください。 –

あなたはSVGソリューションlike hereやキャンバスソリューションlike hereを使用することができますが、近い将来、私たちは、単にCSSを使用したWebKitの機能を、それを行いますbackdrop-フィルタは現在サファリでのみ動作します。それがどのように動作するかを確認するには、Safariでスニペットを試してみてください。

body{ 
 
    margin:0px; 
 
    } 
 

 
.container{ 
 
    position:relative; 
 
    height:100vh; 
 
    width:100%; 
 
    background-image:url(http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg); 
 
    background-size: cover; 
 
    background-position:center center; 
 
    } 
 
    
 
.blur{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform: translate(-50%,-50%); 
 
    width:200px; 
 
    height: 100px; 
 
    -webkit-backdrop-filter: blur(5px); 
 
    }

<div class="container"> 
 

 
    <div class="blur"></div> 
 

 
</div>

出典

2017-04-17 14:07:09 vlk

ありがとう！試しました：https://i.stack.imgur.com/OtcBW.png MacOSのSafariで動作しました。 ChromeとInternet Explorerのソリューション – Vej

これは今のところ最高のソリューションだと思います：http://codepen.io/abduzeedo/pen/eJlfj – vlk

ウェブページ上の任意の領域をぼかす方法は？

答えて

関連する問題