如何使用background：url（data：image / png; base64 with Retina？

Question

我注意到嵌入到具有数据URI方案的css中的图像以“常规”分辨率显示在Retina屏幕上。如何使用Retina显示屏所需的分辨率嵌入和成像？

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

Answer 1

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

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

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

使用示例编辑

好的，这是一个例子：

假设你有2张图片（数据：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

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

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