Css 背景图像在手机上看起来很糟糕

这张图片很好地解释了这个问题

在手机上，我的干净/清晰的重复背景位置，中间-底部，重复-x看起来像垃圾。实际上，它在手机上看起来并没有那么大——它在视觉上看起来和电脑上的大小一样，但是——我认为，由于手机的分辨率更高，它使它看起来像像素化的和起伏的

我不敢相信我以前从来没有遇到过这个问题，但是搜索这个主题就会发现如何在手机上制作重复的背景或者如何在手机上制作全屏背景等等

如何在手机和电脑上制作干净/清晰/良好的背景图像

---

我尝试将图像设置为200dpi而不是72dpi，但运气不好。

最佳解决方案是SVG，最简单的方法是使用像素密度媒体查询

e.g.
.container {
  background-image: url('images/bg.jpg');
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  .container {
    background-image: url('images/bg-2x.jpg');
  }
}

---

如果您使用预处理器，这将变得更加容易，因为您可以为不同的断点（包括像素密度）创建混音。

我想知道这些是否适用于您：设置背景大小？可以根据需要重复的次数+实际细节的宽度来调整%的基数我认为你的两个评论结合起来可能会奏效。我会试试/谢谢！我认为你建议我制作一个两倍大的图像，以便在手机上使用，对吗？图像在手机上显示的大小是正确的-只是看起来很糟糕。是的，但是由于像素密度，如果你提供一张2倍的图像，然后将高度/宽度设置为与桌面相同的高度/宽度，那么你将得到一个清晰的外观。我明白了，但在这种情况下，我没有设置任何高度或宽度。这是一篇好文章，可能比我能更好地解释它。除非图像是全屏的，否则有什么原因不能设置高度或宽度吗？该图像是重复的背景图像。我如何设置它的高度和宽度？