White blur around image when using CSS3 blur filter?

问题

Today I though I'd redesign my website and approach it from a different way. Instead of focusing on typography I though I'd just add a big image and little text. I simply done:

html {
    background: url(../img/background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
}

...however when I see it in the browser (Chrome Version 26.0.1386.0 dev, running on Ubuntu 12.10), the image IS blurred but a faded white frame is also present. Here is a screenshot of how this problem looks like.

Is there any way to get around this? I had a look at this Stack Overflow question but couldn't get it to work (partly because that example uses a <img> tag, not just a <html> one). That white frame just doesn't look good aesthetically. And no, the image doesn't have a white frame (it's simply a screenshot of my desktop, with couple of windows open, so no white frame present). Any ideas why this happens?

Thanks for your help and time.

回答1:

If it's a possibility for you, a good workaround that I found is to make the image larger than the containing <div>, and also to clip the edges with an overflow: hidden.

In your case, because it's the whole <html> tag, I'd put the image in a <div> with the following CSS:

position: fixed;
top: 0;
left: 0;
transform: scale(1.02); # or whatever scale amount removes the border

This always works for me.

来源：https://stackoverflow.com/questions/14547064/white-blur-around-image-when-using-css3-blur-filter

标签

css

filter

blur