如何使用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; 
}