0

我目前正在尝试为我正在开发的这个玩具应用程序设置背景图像。通过查看 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)。

任何帮助表示赞赏！

4

3 回答 3

1

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

于 2016-01-31T21:53:49.487 回答
1

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

如果您对矢量图像和光栅图像之间的区别感兴趣，请参阅这篇关于光栅与矢量图像的文章的以下摘录：

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

...

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

希望这可以帮助！

于 2016-01-31T21:53:54.677 回答
0

有不同的方法来解决这个问题。您发布的 CSS 代码基本上获取您的图像并拉伸它，使其覆盖<body>您网站的整个元素（基本上是浏览器屏幕大小）。

放大后没有办法让小图像看起来很好。可以做的是存储不同大小的图像，并使用媒体查询根据屏幕大小加载特定图像。

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

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

然后，您可以使用 CSS 根据屏幕大小加载适当的 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;
    }
}

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

于 2016-01-31T22:00:23.427 回答