我有一个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的一个功能的后遗症/结果:
当背景图像被定位时,如何停止对其进行铬调整(或其他操作)?
这种情况的发生可能有多种原因。
我猜一下,背景大小没有设置好。 我很想把这个设置成background-size:contain
来保持你的比例。 另外,当您使用background-attachment:fixed;
时,请确保div是position:statice
。
希望这个帮助,如果没有,提供一个jsfiddle,我可以看一看。