Css 使用-webkit过滤器：模糊和非实体边（使用过滤器：模糊）

编辑

基本上，我们将

bg

span设置为始终大于全屏，即使在调整大小时也是如此。模糊边缘应通过使用已知的“在图像周围使用小于图像的容器”来去除，以切断模糊边缘。此容器具有实际屏幕视图端口的大小

现在，这在最新的Firefox35上运行得非常好

但它在webkit浏览器中失败得太厉害了，比如在Chrome40.0.2214.91M中测试过

首先，有绿色背景从身体可见，文字后它消失了？！并显示一个白色的模糊

如果你使用水平卷轴（实际上我并不想要水平卷轴），这还不是全部

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

魔法

拔下插头，让我们的webkit社区修复它。还是我忽略了这个问题的解决方法

资料来源：

HTML

JS

---

你可以试试这个把戏

将正在模糊的相同图像应用到div容器

示例如下：

---

看起来WebKit正在尝试进行一些神奇的优化，并将模糊剪裁到可见部分。作为一个工作环境。。。删除父元素的背景色怎么样？请看一下这个

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

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

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


});

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