剪裁css模糊背景

Question

我试图在背景图像上放置一个CSS3 webkit模糊，然后剪辑它(通过将它放在一个较小的父级中并设置overflow: hidden)。

不幸的是，当我这样做时，我的模糊效果只会出现在被剪裁的内容上，所以我的内容的边缘会明显地从模糊效果中“落后”(大概这是某种优化)。

示例html：

<div class="parent">
    <div class="child checkerboard"></div>
</div>

css：

.parent {
    width    : 100px;
    height   : 100px;
    position : relative;
    border   : 1px solid #000;
    overflow : hidden;
    margin   : 10px;
}

.child {
    -webkit-filter : blur( 5px );
    width          : 200px;
    height         : 200px;
    position       : absolute;
    top            : -60px;
    left           : -60px;
}

.checkerboard {
    background : url( 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Checkerboard_pattern.svg/220px-Checkerboard_pattern.svg.png' );
}

如果我使用的是<img>而不是CSS背景，它可以按预期工作( 小提琴 )。

不幸的是，在我的现场应用程序中，我无法轻松地切换到<img>标记，所以我正在试图找出如何使它与背景图像一起工作。

Answer 1

不知道为什么或如何工作，这一点(至少在我的Chrome)：

.child {
    -webkit-filter : blur( 5px );
    width          : 200px;
    height         : 200px;
    position       : absolute;
    top            : -60px;
    left           : -60px;
    -webkit-transform: rotate(0deg);
}

更新小提琴

Answer 2

我让它工作的唯一方法就是在顶部放置一个绝对定位的剪裁面罩：

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

<div class="wrapper">
<div class="parent">
    <div class="child checkerboard"></div>
</div>
</div>

<div class=clip></div>

.clip {
  border:20px solid #FFF;
  width:80px;
  height:80px;
  position:absolute;
  top:10px;
  left:10px;
}

.parent {
    width    : 100px;
    height   : 100px;
    position : relative;
    border   : 1px solid #000;
    overflow : hidden;
    margin   : 10px;
}

.child {
    -webkit-filter : blur( 5px );
    width          : 200px;
    height         : 200px;
    position       : absolute;
    top            : -60px;
    left           : -60px;
}

.checkerboard {
    background : url( 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Checkerboard_pattern.svg/220px-Checkerboard_pattern.svg.png' );
}