使用CSS3模糊滤镜时,图像周围有白色模糊?

时间:2013-01-27 11:54:48

标签: css3 filter blur

今天我虽然重新设计了我的网站并以不同的方式处理它。我没有专注于排版,而是只添加一个大图像和小文本。我干脆完成了:

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

...但是当我在浏览器中看到它(Chrome版本26.0.1386.0 dev,在Ubuntu 12.10上运行)时,图像IS模糊,但也出现了褪色的白框。 Here is a screenshot of how this problem looks like

有没有办法解决这个问题?我查看了this Stack Overflow question但无法使其工作(部分原因是该示例使用了<img>标记,而不仅仅是<html>标记。那个白色框架在美学上看起来不太好看。不,图像没有白框(它只是我桌面的屏幕截图,有几个窗口打开,所以没有白框)。任何想法为什么会这样?

感谢您的帮助和时间。

1 个答案:

答案 0 :(得分:14)

如果您有可能,我找到一个好的解决方法是使图像大于包含<div>的图像,并使用overflow: hidden剪切边缘。

在您的情况下,因为它是整个<html>标记,我会将图像放在带有以下CSS的<div>中:

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

这对我来说总是有用。