Question

我正在尝试为我正在处理的这个玩具应用设置背景图片。通过浏览SO，我看到了以下代码：

body {
background: url(../images/download.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

然而，我的桌面上的图像质量看起来仍然很糟糕。图像的原始尺寸为168px（h）和300px（w）。

感谢任何帮助！

Answer 1

图像很小，因此为了提高质量，您需要找到同一图像的更高分辨率版本。它还取决于设备的分辨率。

Answer 2

您需要转换现有图像或查找矢量格式的图像（.svg，.eps等）。这将允许您放大图像，而不会像光栅图像格式（.jpg，.png等）那样变得像素化。

如果您对矢量和光栅图像之间的差异感兴趣，请参阅以下关于光栅与矢量图像的this article的摘录：

光栅图像的尺寸以像素为单位。由于不能在不损失质量的情况下放大光栅图像，因此不同的供应商对其工艺具有特定的尺寸要求;它们需要特定的像素分辨率：每英寸内的特定像素数量。图像中每英寸内的像素量表示图像像素分辨率或ppi（每英寸像素数）

...

矢量图形由形成对象或线条的数学计算组成 - 它们不使用像素，因此它们与分辨率无关。

希望这有帮助！

Answer 3

有不同的方法来解决这个问题。您发布的CSS代码基本上会占用您的图片并将其拉伸，以便覆盖您网站的整个<body>元素（基本上是浏览器屏幕尺寸）。

炸毁时无法使小图像看起来很好。可以做的是存储不同大小的图像，并使用媒体查询根据屏幕大小加载特定图像。

假设您存储了3种不同的尺寸：

image_large.jpg (2000 x 2000)
image_medium.jpg (1000 x 1000)
image_small.jpg (500 x 500)

然后，您可以使用CSS根据屏幕大小加载适当的：

@media screen and (min-width: 0px) and (max-width: 1000px) {
    body {
        background: url(../images/image_small.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

@media screen and (min-width: 1001px) and (max-width: 2000px) {
    body {
        background: url(../images/image_medium.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
 }

 @media screen and (min-width: 2001px) {
    body {
        background: url(../images/image_large.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

这可以防止屏幕较小的移动设备加载不必要的大图像。但是，正如我之前所说的，如果你没有更高的源图像分辨率，那你就不走运了。

有没有办法在向上扩展时保持背景图像的质量？

3 个答案: