2

So I set a background img with background-size: cover. Works so far. But when I add a blur it will lose it's hard egde obviously. How could I remove the blurred edge? Maybe the background has to be scaled up and then cut off with some overflow:hidden?

I would have used a wrapping div with overflow:hidden around an img, but then I can't use background-size:cover, right?

This is how it looks: http://jsfiddle.net/RyQRY/

And this is how it should look: http://cl.ly/image/0B2f191p2m0i

HTML

<div id="background"></div>

CSS

#background {
    position: absolute;
    z-index: -999;
    top: 0px;
    height: 546px;
    width: 100%;
    background-image: url(../img/background.jpg);
    background-size: cover;
    -webkit-filter: blur(50px);
}
4

1 回答 1

0

Second link is dead, so I don't know how it should be.

However you can hide blured edges:

position: absolute;
    top: -25px;
    bottom: -25px;
    left: -25px;
    right: -25px;

But you can NOT use overflow:hidden after that, because it will crop bluring-area. And you find yourself in the same place where you were ))

Use :after.

It is not very beautyfull solution, but...

You can look here:

http://jsfiddle.net/RyQRY/10/

May be it will be usefull for you...

于 2014-01-17T14:14:55.117 回答