问题描述
今天，尽管我会重新设计我的网站，并以不同的方式来处理它.尽管我不关注排版，但我只是添加了一个大图像和少量文本.我只是做了:
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);
}
...但是，当我在浏览器中看到它时(Chrome版本26.0.1386.0 dev，在Ubuntu 12.10上运行)，图像模糊不清，但也出现了褪色的白框. 此处是此问题的屏幕截图.
...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.
有什么办法可以解决这个问题?我看了此堆栈溢出问题，但无法解决工作(部分原因是该示例使用了<img>标记，而不仅仅是<html>标记).那个白色的框架在美学上看起来并不好.不会，图像没有白框(这只是我的桌面的屏幕快照，有几个窗口打开，因此没有白框).任何想法为什么会发生这种情况?
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?
感谢您的帮助和时间.
推荐答案
如果有可能，我发现一个不错的解决方法是使图像大于包含<div>的图像，并使用一个overflow: hidden.
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.
在您的情况下，因为它是整个<html>标记，所以我将使用以下CSS将图像放在<div>中:
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
这总是对我有用.
这篇关于使用CSS3模糊滤镜时图像周围出现白色模糊?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！