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背景，它会按预期工作（jsfiddle）

不幸的是，在我的直播应用中，我无法轻松切换到<img>标签，因此我正在尝试弄清楚如何使用背景图像。

Answer 1

不知道为什么或如何，这有效（至少在我的Chrome中）：

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

updated fiddle

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

剪裁css模糊背景

2 个答案: