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

问题

How can you properly blur an image using CSS3 without fading the edges or cropping the image?

DEMO

The issue the green BG show thru:

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;

}

回答1:

This is the solution I came up with, its a bit of a "hack" and bit messy, but it works. (at least for me on chrome )

The way I did it was to first create a 3x3 grid and "mirror tile them"with the scale also and offset everything slightly and then I zoomed in to 300% but here is the strange part to actually get it to work I needed to make sure it rendered the tiles outside of the div so I need to have a hidden animated div (#loading_dot in the code) at the correct z-index, forcing it to render all.

//tip: use vh or vw instead of px for the blur scale.

DEMO

The image mirror tiled

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

回答2:

Solution 2

A bit more viable option, have layer two images one image behind that's also blurred but scaled up slightly and have those in a wrapper element with 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;
}

来源：https://stackoverflow.com/questions/32903140/how-to-blur-an-image-using-css3-without-cropping-or-fading-the-edges