11

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

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 开发版，在 Ubuntu 12.10 上运行），图像模糊，但也出现了褪色的白框。这是这个问题的截图。

有没有办法解决这个问题？我查看了这个 Stack Overflow 问题，但无法正常工作（部分原因是该示例使用了一个<img>标签，而不仅仅是一个标签<html>）。那个白色的框架在美学上看起来并不好。不，图像没有白框（它只是我桌面的截图，打开了几个窗口，所以没有白框）。任何想法为什么会发生这种情况？

感谢您的帮助和时间。

4

1 回答 1

17

如果您有可能，我发现的一个很好的解决方法是使图像大于包含的<div>，并使用overflow: hidden.

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

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

这总是对我有用。

于 2014-02-21T16:47:42.600 回答