与 -webkit-filter 战斗：模糊而不是实心边缘（与过滤器一起使用：模糊）

我写了这支笔 http://codepen.io/anon/pen/ByZPxw

EDIT 请参阅 Alexander Omara 的这支钢笔，了解我的钢笔的较短版本 http://codepen.io/anon/pen/rawrog

基本上我们设置了bg跨度始终大于全屏，即使在调整大小时也是如此。模糊边缘的去除应采用已知的“在图像周围使用比图像小的容器”来剪掉模糊边缘。该容器具有实际屏幕视口的大小。

现在，这在最新的 Firefox 35 中运行得非常好。

但它失败了so hard在 webkit 浏览器中，例如在镀铬 40.0.2214.91 m 中进行测试。

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

如果您使用水平滚动，这还不是全部（我实际上并不想要水平滚动）

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

Magic.

拔掉这个插头并让我们的 webkit 社区修复它。或者是否有解决办法，我不知何故忽略了？

Source:

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


});

你可以试试这个技巧。

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

这里的例子：

http://codepen.io/anon/pen/aOoNGV 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);
}