有没有办法在放大时保持背景图像的质量？答案

【问题标题】：Is there a way to preserve the quality of a background image when scaling upward?有没有办法在放大时保持背景图像的质量？
【发布时间】：2016-01-31 21:43:55
【问题描述】：

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

感谢任何帮助！

【问题讨论】：

如果你找到了一个解决方案，可以在不损失质量的情况下将小图像调整为大版本，你应该将其作为一项服务提供并收取高额费用 ^^ 但不开玩笑，如果出现以下情况，小图像总是看起来很糟糕你把它放大一点点。
啊，所以我在整个团队中追鬼，试图找到一种方法，谢谢你的回复！是的，如果我找到办法，我一定会收取 mucho dinero :)
raster 图像的黄金法则是先大后小。反之亦然。
我刚开始就 SO 提出问题，有人可以解释为什么我的问题被否决了吗？

标签： html css background-size

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

...

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

希望这会有所帮助！

【讨论】：

这绝对是个好消息！感谢您的详细回复。

【解决方案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;
    }
}

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

【讨论】：