解决方案2

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

这是我提出的解决方案，它有点“黑客”而且有点凌乱，但它有效。 （至少对我来说是铬）

我这样做的方法是首先创建一个3x3网格和“镜像瓷砖”，同时缩放所有内容并略微偏移所有内容然后我放大到300％，但实际上是让它工作的奇怪部分我需要确保它在div之外渲染了tile，所以我需要在正确的z-index处有一个隐藏的动画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;
}

如何使用CSS3模糊图像而不裁剪或淡化边缘？

2 个答案:

解决方案2