CSS模糊和溢出：隐藏

Question

更新

我在这里创建了一个simliar jsfiddle http://jsfiddle.net/ckaeno9s/ 在safari中，这可以正常工作。在铬中它没有。如果你删除溢出：隐藏;从第15行开始，您会注意到模糊现在正在以正确的方式应用。

这个问题很好地总结了这个问题。

原始消息

我正在尝试创建一个模糊的横幅效果，它在Safari（底部）中运行良好，但在Chrome（顶部）中运行得不是很好。

这是如何工作的是，通过CSS中的-webkit-filter应用了模糊效果，将一个太大的东西放入标题中的div中，然后标题有一个溢出：隐藏应用于它。我认为发生的事情是溢出：隐藏在chrome中的模糊之前应用，因此较小的图像会留下模糊，给出柔和的边缘。而在Safari中，过滤器在溢出之前应用：隐藏。如果我使用overlow hidden增加div的大小，我会得到以下内容：

这在标题的底部是正确的，但显然现在它正在流出我的标题。有什么方法可以让我的溢出：隐藏在模糊后应用？或者只是在我的徒步旅行中获得相同的效果。

.content-blurred {
    margin-top:0px;
    padding:0;
    position:absolute;
    top:-50px;
    left:0;
    right:0;
    -webkit-filter:blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter:url(#blur-effect);
    opacity:1;
    z-index: 1;
}

#header {
    overflow:hidden;
    position: fixed;
    height:38px;
}

总结一下我的问题：我想在模糊的div上创建硬边。

Answer 1

<强>更新

这样的东西？ http://jsfiddle.net/tbsksa18/1/

HTML

<div class="parent">
    <div class="miss-blurry"></div>
</div>

CSS

.parent{
    width: 300px;
    height: 300px;
    margin: 100px;
    position: relative;
    overflow: hidden;
}

.miss-blurry{
    width: 130%;
    height: 130%;
    position: absolute;
    background: url(http://www.freeallimages.com/wp-content/uploads/2014/07/dog-1.jpg) center center;
    background-size: cover;
    -webkit-filter: blur(40px);
    transform: translate(-15%, -15%);
}