如何在不裁剪或淡化边缘的情况下使用 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

这是我想出的解决方案，它有点 "hack" 有点乱，但它确实有效。 （至少对我来说 chrome ）

我这样做的方法是首先创建一个 3x3 网格，"mirror tile them" 也使用比例并稍微偏移所有内容，然后我放大到 300%，但这是实际得到它的奇怪部分工作我需要确保它在 div 之外呈现图块，所以我需要有一个隐藏的动画 div （代码中的#loading_dot） 在正确的 z-index 处，强制它渲染所有内容。

//提示：使用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

一个更可行的选择，在第二层图像后面有一个图像也模糊但稍微放大并将它们放在包装元素中 overflow:hidden;

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

如何在不裁剪或淡化边缘的情况下使用 CSS3 模糊图像？

How to blur an image using CSS3 without cropping or fading the edges?

html

css

css-hack

解决方案 2