使用CSS3模糊滤镜时,白色模糊的图像？

今天我虽然重新设计了我的网站,但从不同的方式来处理.而不是专注于排版,虽然我只是添加一个大的图像和一点点文字.我完成了：

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上运行)时,图像模糊,但也存在褪色的白色框架. Here is a screenshot of how this problem looks like.

有没有办法解决这个问题？我看了一下this Stack Overflow question,但是无法让它工作(部分原因是这个例子使用了< img>标签,而不仅仅是< html>一个).那个白色框架在美观上看起来并不美观.而不是,图像没有一个白色的框架(这只是我的桌面的屏幕截图,几个窗口打开,所以没有白框).任何想法为什么会发生

感谢您的帮助和时间.

解决方法

如果这是一个可能性,我发现一个很好的解决方法是使图像大于包含< div>的图像,还可以用overflow：hidden来剪切边.

在你的情况下,因为它是整个< html>标签,我将图像放在< div>与以下CSS：

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

这总是适合我.

原文地址：https://www.jb51.cc/css/213983.html