html - CSS3 を使用してエッジをトリミングまたはフェードせずに画像をぼかす方法は?

Question

エッジをフェードさせたり、画像をトリミングしたりせずに、CSS3 を使用して画像を適切にぼかすにはどうすればよいでしょうか?

デモ

緑色の BG が表示される問題:

HTML:

<div id="bg_img" classid="blink_me"></div>

CSS:

/*regular way of doing it*/

body{
    background-color: #0F0;
    margin: 0;
    padding: 0;
}

#bg_img{
    filter: blur(50px);  /*Set amount of blur, px units are bad when re-scaling the window size */
    -webkit-filter: blur(50px); /*Set amount of blur, px units are bad when re-scaling the window size */
    position:absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;

}

Answer 1

解決策 2

もう少し実行可能なオプションとして、レイヤー 2 の画像を 1 画像後ろに配置し、これもぼやけていますが、わずかに拡大し、overflow:hidden;を使用してラッパー要素に配置します。

デモ

HTML:

<div id="bg_img_wrapper">
    <div id="bg_img"></div>
    <div id="bg_img_scaled"></div>
</div>

CSS:

body{
    background-color: #0F0;
    margin: 0;
    padding: 0;
}

#bg_img{
    filter: blur(3vh);  
    -webkit-filter: blur(3vh); 
    position:absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
     z-index:3;
}

#bg_img_scaled{
    filter: blur(3vh);  
    -webkit-filter: blur(3vh); 
    position:absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index:2;
}

#bg_img_wrapper{
    position:absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}