CSS模糊和溢出：隐藏

Question

Update

I have created a simliar jsfiddle here http://jsfiddle.net/ckaeno9s/ In safari this works correctly. In chrome it does not. If you remove overflow:hidden; from line 15 you'll notice that the blur is now being applied in the correct way.

This jsfiddle sums up the problem well.

Original Message

I am trying to create a blurred banner effect and it is working pretty well in Safari (bottom) but not so well in Chrome (top).

How this is working is that something too big is being placed into a div in the header with a blur effect applied via -webkit-filter in the CSS, then the header has an overflow: hidden applied to it. I think what is happening is the overflow: hidden is being applied before the blur in chrome, so then a smaller image is left to blur, giving the soft edges. Whereas in Safari, the filter is being applied before the overflow: hidden. If I increase the size of my div with overlow hidden I get the following:

which is correct at the bottom of the header but obviously now it is flowing out of my header. Is there any way I can get my overflow: hidden to be applied after the blur? Or just achieve the same effect in chrome as I'm getting in 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;
}

To summarise my question : I want to create hard edges on a blurred div.

Answer 1

Updated

Something like this? 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%);
}