gpt4 book ai didi

css - 使用 CSS3 模糊滤镜时图像周围出现白色模糊?

转载 作者:技术小花猫 更新时间:2023-10-29 10:32:38 24 4
gpt4 key购买 nike

今天我想重新设计我的网站并从不同的 Angular 来处理它。我没有专注于排版,而是只添加了大图像和小文本。我只是做了:

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

这对我总是有效。

关于css - 使用 CSS3 模糊滤镜时图像周围出现白色模糊?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14547064/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com