在移动端用css设置了背景图片以后，图片变得很模糊，怎么解

Question

我用css设置好图片背景后，在移动端看着非常模糊，这是为什么啊？用的webpack来打的包，图片文件使用的url-loader来处理，但是压不压缩都很模糊，求大神帮忙

附上代码：

附上效果图：
[文件]

Answer 1

图片使用svg格式或者将图片分辨率调高

Answer 2

background-image：image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );

Answer 3

应该是和你图片的尺寸和质量有关，原图的尺寸是否大于你设置的宽高大小

Answer 4

可能是把设备像素和实际像素搞混了，切图的时候要按照设备象素的尺寸来切，比如iphone6宽度 375px，图片要按设计稿375 * 2的尺寸出图，因为屏幕会把一个像素渲染出两个像素来，如果还是按375来出图，就会损失一半的质量。不过如果按 * 2，在iphone7等dpr大于2的屏幕下，质量还是有损失，不过一般在可接受范围内。