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

【问题标题】：How to stop background-position making the background image less sharp?如何停止背景位置使背景图像不那么清晰？
【发布时间】：2021-07-19 08:08:45
【问题描述】：

我有一个 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)，但我肯定会漏掉一些东西。

我的问题是标题：

如何停止 background-position 使背景图像不那么清晰？

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

如何在 Chrome 定位时停止将其大小调整（或执行其他操作）到背景图像？

【问题讨论】：

【解决方案1】：

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

我猜测一下，背景大小没有设置。我很想把这个设置为background-size: contain，以保持你的比例。此外，当您使用 background-attachment: fixed; 时，请确保 div 为 position: static。

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

【讨论】：

感谢小伙伴的快速回复！这是一个 JSFiddle：jsfiddle.net/sr4qkt6f/11 不幸的是，这些建议不起作用（或者至少我没有正确实施它们）。背景需要保持其大小，contain 会调整大小以适应屏幕。
如果您查看带有background-position 属性的文本（在图像的右侧），然后删除background-position 属性并再次查看，您会明白我的意思锐度。有点难以注意到，但应该足够清楚。
没有问题。我明白你的意思。这是由于 Chrome 上的亚像素渲染。尝试添加image-rendering: pixelated; 它应该将图像四舍五入到最近的像素，使它再次变得漂亮和清晰。
谢谢！这会导致我们最终使用的实际图像撕裂。您还有其他建议吗？
只是在寻找更多信息，缩小图像时似乎是 chrome 的问题。也许使用另一个image-rendering 属性可能会起作用-webkit-optimize-contrast。否则我唯一可以建议的另一件事是强制浏览器使用其 GPU 进行渲染 transform-style: preserve-3d;

【解决方案2】：

image-rendering: pixelated;

它对我有用。

【讨论】：