Question

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

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>标记。那个白色框架在美学上看起来不太好看。不，图像没有白框（它只是我桌面的屏幕截图，有几个窗口打开，所以没有白框）。任何想法为什么会这样？

感谢您的帮助和时间。

Answer 1

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

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

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

这对我来说总是有用。

使用CSS3模糊滤镜时，图像周围有白色模糊？

1 个答案: