今天我虽然重新设计了我的网站并以不同的方式处理它.我没有专注于排版,而是只添加一个大图像和小文本.我干脆完成了:
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模糊,但也出现了褪色的白框.以下是此问题的截图.
有没有办法解决这个问题？我看了一下这个Stack Overflow问题,但无法使它工作(部分原因是该示例使用了一个<img>标签,而不仅仅是一个标签<html>).那个白色框架在美学上看起来不太好看.不,图像没有白框(它只是我桌面的屏幕截图,有几个窗口打开,所以没有白框).任何想法为什么会这样？
谢谢你的帮助和时间.
She*_*aff 14
如果你有可能,我发现一个好的解决方法是使图像比包含图像更大<div>,并且还用一个边缘剪切边缘overflow: hidden.
在你的情况下,因为它是整个<html>标记,我将<div>使用以下CSS 将图像放入a :
position: fixed;
top: 0;
left: 0;
transform: scale(1.02); # or whatever scale amount removes the border
这对我来说总是有用的.