css - 如何在 Retina 中使用 background:url(data:image/png;base64？

Question

我注意到使用 Data URI 方案嵌入到 css 中的图像以“常规”分辨率显示在 Retina 屏幕上。如何以 Retina 显示器所需的分辨率进行嵌入和图像处理？

我没有尝试将双分辨率 (@2) PNG 嵌入到 CSS 中，但我怀疑它会以双倍大小显示，类似于未定义图像大小时的常规图像。

Answer 1

两个图像可以具有相同的分辨率但不同的 dpi。这是视网膜显示器中的重要部分，因此，您需要具有不同 dpi 的图像的两个版本（如果您想为那些没有视网膜的人节省一些带宽）。

有关如何在 css 中添加规则以及一些 dpi 值的更多信息，请查看：Retina Display Media Query。

编辑 正如@carlos-r-balebona 的评论所指出的，如果将图像嵌入到 CSS 中，将不会保存带宽，因为将始终发送两个版本。仅当您使用图像 URL 时才会保存它，因为只会下载正确的 URL。

编辑示例

好的，这是一个例子：

假设您有 2 张图片 (data:image/png;base64,{192_dpi_encoded_image}) 和 (data:image/png;base64,{96_dpi_encoded_image})。

现在假设您有一个 div 要将背景图像设置为：

<div id="a" style="width: 100px; height:100px;">
</div>

在你的 CSS 中：

@media only screen
{
     #a
    {
        background:url(data:image/png;base64,{96_dpi_encoded_image});
    }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){
    #a
    {
        background:url(data:image/png;base64,{192_dpi_encoded_image});
    }
}

仅当存在视网膜屏幕时，最后一个带有条件的 @media 才会覆盖之前设置的背景图像，因此，在需要时设置大 dpi 图像。

希望这可以帮助。

Answer 2

您可以仅以像素为单位设置背景大小（如果您的图像具有 2 倍分辨率，则值应该是原始尺寸除以 2）：

.element {
  background-image: url(data:image/png;asdkfasdkf);
  background-size: 25px 50px;
}