css - 与-webkit-filter : blur and not solid edges (works with filter: blur)战斗

Question

I have written this pen

编辑 see this pen of Alexander Omara for a shorter version of my pen

基本上，我们将 bg 范围设置为始终超过全屏，即使在调整大小时也是如此。应该使用已知的“在图像周围使用比图像小的容器”来去除模糊边缘来去除模糊边缘。此容器具有实际屏幕视口(viewport)的大小。

现在这在最新的 firefox 35 中工作得很好。

但它在 webkit 浏览器中非常失败，例如在 chrome 40.0.2214.91 m 中测试。

首先，正文中可见绿色背景，在文本之后它消失了？!并显示出白色模糊。

这还不是全部，如果你使用水平滚动(实际上我真的不想要水平滚动)

body 的绿色背景消失。如果您再次向左滚动，它会重新出现。模糊边缘来自浏览器窗口的边缘，靠近滚动条，它不是来自实际图像边缘。可以看到绿色背景，当左右滚动时，绿色变成白色。

魔术。

拔掉这个插头，让我们的 webkit 社区修复它。还是我忽略了这个问题？

来源:

HTML

<span class="lux-section" ><span class="bg" ></span><span><br><br><br><br><br>About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us<br></span></span>

CSS

.lux-section .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://s15.postimg.org/4elomwgbv/luxvitae.jpg) center center scroll no-repeat;
  background-size: 100% auto;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  filter: blur(15px);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: -1;
  display: inline-block;
}

body{
  background-color: green;
  margin: 0;
}

JS

      lux = {};

function reinitSizes(){
            lux.viewWidth = $(window).width()   ;
            lux.viewHeight = $(window).height() ;
  //enclosing span of the bg image and the text
            $(".lux-section").css({
                "width": lux.viewWidth,
                "height": lux.viewHeight
            });

  //resize the bg image to be bigger than it's enclosing span.
            $(".lux-section > .bg").each(function(index, bgObj){
                var blur = 15;
                var resized = blur * blur;
                $(bgObj).css({
                "width": (lux.viewWidth +   resized),
                "height": (lux.viewHeight + resized),
                "top" : Math.round(-0.5*resized),
                "left": Math.round(-0.5*resized)
            });
        });

        }

$(function(){

 reinitSizes();

  $(window).resize(function() {
                reinitSizes();
            });


});

Answer 1

你可以试试这个技巧。

将您要模糊的相同图像应用到 div 容器

这里的例子:

http://codepen.io/anon/pen/aOoNGV

body {
  background: black;
}
.wrap {
  background: green;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
    background: white url('https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png');
}
.image {
  position: absolute;
  left: -15px;
  right: -15px;
  top: -15px;
  bottom: -15px;
  background: white url('https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png');
  -webkit-filter: blur(15px);
     -moz-filter: blur(15px);
          filter: blur(15px);
}