使用-webkit-filter进行战斗：模糊而非实体边缘（适用于滤镜：模糊）

Question

I have written this pen

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

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

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

但它在webkit浏览器中如此难以失败，例如在铬40.0.2214.91米测试。

首先，身体上有绿色的bg可见，文字消失后？并显示出发白的模糊。

如果使用水平滚动（我实际上并不想要水平滚动），那就不是全部了。

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

魔术。

拔下插件并让我们的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);
}