How to blur an image using CSS3 without cropping o

问题:

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