CSS模糊和溢出：隐藏

Question

更新

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

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

原始信息

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

它的工作原理是，通过 CSS 中的 -webkit-filter 应用模糊效果的标题中的 div 中放置了太大的东西，然后标题应用了溢出：隐藏。我认为正在发生的事情是溢出：在 chrome 中的模糊之前应用隐藏，因此留下较小的图像进行模糊，从而提供柔和的边缘。而在 Safari 中，过滤器在溢出之前应用：隐藏。如果我增加了隐藏过低的 div 的大小，我会得到以下信息：

这在标题的底部是正确的，但显然现在它正在从我的标题中流出。有什么办法可以让我溢出：隐藏以在模糊后应用？或者只是在 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%);
}