如何使用CSS3模糊圖像而不裁剪或淡化邊緣？

Question

如何在不淡化邊緣或裁剪圖像的情況下使用CSS3正確模糊圖像？

DEMO

問題綠色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

這是我想出的解決方案，它的一個「黑客」，有點混亂，但它的工作原理。 （至少對我來說對鉻）

我做的是先創建一個3×3格和「鏡瓦他們」隨着規模也略有偏移一切，然後我放大到300％的方式，但這裏是奇怪的部分，以實際得到它的工作，我需要確保它呈現在div外的瓷磚，所以我需要在正確的z-索引處有一個隱藏的動畫div （#loading_dot在代碼中），迫使它呈現所有。

//提示：使用VH或VW而不是爲模糊規模PX。

DEMO

平鋪的圖像鏡

HTML：

<a href='http://www.patan77.com' id='text_overlay' class='blink_me' target='_blank'>Patan77.com</a> 
<div id="loading_dot" class="blink_me"></div> 
<div id="wrapper0"> 
    <div id="wrapper1"> 
     <div id="wrapper2"> 
      <div id="bg1" class="bg_img"></div> 
      <div id="bg2" class="bg_img"></div> 
      <div id="bg3" class="bg_img"></div> 
      <div id="bg4" class="bg_img"></div> 
      <div id="bg5" class="bg_img">Visible DIV</div> 
      <div id="bg6" class="bg_img"></div> 
      <div id="bg7" class="bg_img"></div> 
      <div id="bg8" class="bg_img"></div> 
      <div id="bg9" class="bg_img"></div> 
     </div> 
    </div> 
</div> 

CSS：

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



#text_overlay{ 
    position:absolute; 
    z-index: 20; 
    outline: none; 
    text-decoration: none; 
    font-family:Arial, Helvetica, sans-serif; 
    color: #FFF; 
    font-size: 3em; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 


.bg_img{ 
    position:absolute; 
    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; 
    width: calc(100% /3); 
    height: calc(100% /3); 
} 

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

} 

#wrapper1{ 
    position:absolute; 
    width: 300%; /* 1 change these to 100% to zoom out*/ 
    height: 300%; /* 2 change these to 100% to zoom out*/ 
    top: -50%; /* 3 change these to 0 to zoom out*/ 
    left: -50%; /* 4 change these to 0 to zoom out*/ 
    z-index: 10; 

} 
#wrapper2{ 
    filter: blur(6vh); /*Set amount of blur use vh units*/ 
    -webkit-filter: blur(6vh); /*Set amount of blur use vh units*/ 
    position:absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
} 
#bg1{ 
    position:absolute; 
    left: calc(-100% /6); 
    top: calc(-100% /6); 
    -webkit-transform: scale(-1,-1); 
    transform: scale(-1,-1); 
} 
#bg2{ 
    left:calc(100% /6); 
    top: calc(-100% /6); 
    -webkit-transform: scale(1,-1); 
    transform: scale(1,-1); 
} 
#bg3{ 
    left:calc(100% /2); 
    top: calc(-100% /6); 
    -webkit-transform: scale(-1,-1); 
    transform: scale(-1,-1); 
} 
#bg4{ 
    -webkit-transform: scale(-1,1); 
    transform: scale(-1,1); 
    left: calc(-100% /6); 
    top:calc(100% /6); 
} 
#bg5{ 
    left:calc(100% /6); 
    top:calc(100% /6); 
    color: #FFF; 
    font-size:50px; 
    text-align: center; 
} 
#bg6{ 
    -webkit-transform: scale(-1,1); 
    transform: scale(-1,1); 
    left:calc(100% /2); 
    top:calc(100% /6); 
} 
#bg7{ 
    -webkit-transform: scale(-1,-1); 
    transform: scale(-1,-1); 
    left:calc(-100% /6); 
    top:calc(100% /2); 
} 
#bg8{ 
    -webkit-transform: scale(1,-1); 
    transform: scale(1,-1); 
    left:calc(100% /6); 
    top:calc(100% /2); 
} 

#bg9{ 
    -webkit-transform: scale(-1,-1); 
    transform: scale(-1,-1); 
    left:calc(100% /2); 
    top:calc(100% /2); 
} 

.blink_me { 
    -webkit-animation-name: blinker; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-iteration-count: infinite; 

    -moz-animation-name: blinker; 
    -moz-animation-duration: 1s; 
    -moz-animation-timing-function: ease; 
    -moz-animation-iteration-count: infinite; 

    animation-name: blinker; 
    animation-duration: 1s; 
    animation-timing-function: ease; 
    animation-iteration-count: infinite; 
} 

@-moz-keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.5; } 
    100% { opacity: 1.0; } 
} 

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.5; } 
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.5; } 
    100% { opacity: 1.0; } 
} 

Answer 2

溶液2

有點更可行的選擇，有層的兩個圖像後面一個圖像也變得模糊，但略微放大，並將這些在一個包裝元件與溢出：隱;

DEMO

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; 
}