提问者:小点点

如何停止背景位置使背景图像变得不那么清晰?


我有一个1920x1080的JPEG背景图像,我在一个1920x1080的屏幕上使用。

它具有以下属性:

background-image: url(/bg.jpg);
background-attachment: fixed;
background-position: center top;
background-repeat: repeat;

在Chrome中,没有背景-position:center Top;背景是完美的缩放和清晰的。 添加此属性后,背景将失去清晰度。

奇怪的是,如果浏览器宽度是奇数,图像是完美的锐利。 所以1920x1080会有点模糊,但1919x1080是完美的。

在Edge和Firefox中,背景图像在任何一种情况下都是完美缩放的。

由于某些浏览器上有滚动条,因此需要background-position属性才能正确定位。

我尝试了图像呈现。 我能看到的唯一区别是pixelate属性,但它会在某些部分造成撕裂。

我已经测试了很多不同的属性组合(background-size),但我肯定会漏掉一些东西。

我的问题是题目:

如何停止背景位置使背景图像变得不那么清晰?

但这个问题的答案也解决了我的问题,因为我认为这可能是一个bug,或者至少是Chrome的一个功能的后遗症/结果:

当背景图像被定位时,如何停止对其进行铬调整(或其他操作)?


共1个答案

匿名用户

这种情况的发生可能有多种原因。

我猜一下,背景大小没有设置好。 我很想把这个设置成background-size:contain来保持你的比例。 另外,当您使用background-attachment:fixed;时,请确保div是position:statice

希望这个帮助,如果没有,提供一个jsfiddle,我可以看一看。