css - 背景图片在手机上看起来很糟糕

图片几乎说明了问题。

在手机上，我干净/清晰的重复背景（位置中心底部，repeat-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');
  }
}

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

关于css - 背景图片在手机上看起来很糟糕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25248215/