html - 如何停止背景位置使背景图像不那么清晰？

Question

我有一张 1920x1080 JPEG 背景图片，我正在 1920x1080 屏幕上使用。

它具有以下属性:

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

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

奇怪的是，如果浏览器的宽度是奇数，图像就会非常清晰。所以 1920x1080 会有点模糊，但 1919x1080 会很完美。

在 Edge 和 Firefox 中，背景图像在任何一种情况下都可以完美缩放。

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

我试过image-rendering。我真正看到的唯一不同之处是 pixelate，但它会导致某些部分撕裂。

我已经尝试了很多不同的属性组合(background-size)，但我肯定会错过一些东西。

我的问题是标题:

How to stop background-position making the background image less sharp?

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

How to stop Chrome resizing (or doing something else) to a background image when it is being positioned?

Answer 1

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

我会猜测并说没有设置背景大小。我很想将此设置为 background-size: contain 以保持您的比例。此外，当您使用 background-attachment: fixed; 时，确保 div 是 position: static。

希望这对您有所帮助，如果没有，请提供一个 jsfiddle，我可以看看。