如何使用CSS3模糊图像，而不裁剪或淡化边缘？ [英] How to blur an image using CSS3 without cropping or fading the edges?

问题描述

如何使用CSS3正确模糊图片，而不会使边缘消失或裁剪图片？

HTML：

 < div id =bg_imgclassid =blink_me>< / div> 
   

CSS ：

  / *常规的做法* / 
 
 body {
 background-color：＃0F0; 
 margin：0; 
 padding：0; 
} 
 
 #bg_img {
 filter：blur（50px）; / *设置模糊量，px单位在重新缩放窗口大小时是坏的* / 
 -webkit-filter：blur（50px）; / *设置模糊量，px单位在重新缩放窗口大小时是坏的* / 
 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; 
 
} 
  

解决方案

解决方案我想出了，它有点黑客和位乱，但它的工作原理。

我这样做的方式是首先创建一个3x3网格和他们与比例也偏移一切轻微，然后我放大到300％，但这里是奇怪的部分，实际上得到它的工作，我需要确保它渲染的div外面的瓷砖，所以我需要有一个隐藏动画div （代码中的＃load_dot）在正确的z-index，强制它渲染所有。

：对模糊比例使用 vh 或 vw 而不是 px 。

镜像瓷砖

HTML ：

 < a href ='http：//www.patan77.com'id ='text_overlay'class ='blink_me'target ='_ blank'> Patan77.com< / a> 
< div id =loading_dotclass =blink_me>< / div> 
< div id =wrapper0> 
< div id =wrapper1> 
< div id =wrapper2> 
< div id =bg1class =bg_img>< / div> 
< div id =bg2class =bg_img>< / div> 
< div id =bg3class =bg_img>< / div> 
< div id =bg4class =bg_img>< / div> 
< div id =bg5class =bg_img>可见DIV< / div> 
< div id =bg6class =bg_img>< / div> 
< div id =bg7class =bg_img>< / div> 
< div id =bg8class =bg_img>< / div> 
< div id =bg9class =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将它们改为100％以缩小* / 
 height：300％; / * 2将它们改为100％以缩小* / 
 top：-50％; / * 3将这些更改为0以缩小* / 
 left：-50％; / * 4将这些更改为0以缩小* / 
 z-index：10; 
 
} 
＃wrapper2 {
 filter：blur（6vh）; / *设置模糊量使用vh单位* / 
 -webkit-filter：blur（6vh）; / *设置模糊量使用vh单位* / 
 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; } 
} 
  

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;

}

解决方案

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

这篇关于如何使用CSS3模糊图像，而不裁剪或淡化边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！