javascript - CSS 模糊和溢出 :hidden

Question

更新

我在这里创建了一个类似的 jsfiddle http://jsfiddle.net/ckaeno9s/ 在 Safari 中，这可以正常工作。在 Chrome 它没有。如果你删除 overflow:hidden;从第 15 行开始，您会注意到现在以正确的方式应用了模糊。

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

原始消息

我正在尝试创建一个模糊的横幅效果，它在 Safari(底部)中运行良好，但在 Chrome(顶部)中效果不佳。

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

在页眉底部是正确的，但显然现在它从我的页眉中流出。有什么办法可以让我的 overflow: hidden 在模糊之后应用？或者只是在 chrome 中实现与我在 safari 中相同的效果。

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