背景图片在手机上看起来很糟糕 [英] background image looks terrible on mobile

问题描述

图片几乎可以说明问题所在.

The picture pretty much explains the problem.

在手机上，我干净/清晰的重复背景(位置中心底部，重复x)看起来像胡扯.它实际上在电话上看起来并不大-在外观上看起来与计算机上的大小相同，但是-我认为由于电话的分辨率更高，因此使其看起来像素化且断断续续.

On mobile phones, my clean/crisp repeating background (position center bottom, repeat-x) looks like crap. It doesn't actually appear that large on the phone - it looks visually the same size as on a computer, but - I assume since the phone is a higher resolution, it's making it look pixelated and choppy.

我不敢相信我以前从未遇到过这个问题，但是搜索主题只是出现如何在手机上制作重复的背景"或如何在手机上制作全屏背景" ...等

I can't believe I've never come across this issue before, but searches for the subject just turn up "how to make repeating backgrounds on mobile" or "how to do full-screen backgrounds on mobile"...etc.

如何制作在移动设备和计算机上看起来都干净/清晰/良好的背景图片?

How can I make a background image that will look clean/crisp/good on both mobile and computer?

我尝试将图像的分辨率改为200dpi，而不是72dpi，但是-不走运.

I tried making the image 200dpi instead of 72dpi, but - no luck.

推荐答案

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

Whilst the optimal solution is SVG, the easiest way to do this is using pixel-density media queries.

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');
  }
}

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

If you are using preprocessors this becomes even easier as you can create mixins for different breakpoints including pixel densities.

这篇关于背景图片在手机上看起来很糟糕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！