html - 有没有办法直接在css后台使用图片数据？

Question

我已经看到如何将图像数据嵌入到 img 标签中(感谢下面的回答)但是我一直很难将图像数据作为 css 背景嵌入 在 div 标签中。

如果我获取相同的图像数据并将其放入 background-url 属性中，它将不再有效。

<style>
#myDiv {
    background-url(image-data);
}
</style>

<div id="myDiv" >

</div>

这是我的测试 html 和 css，https://jsfiddle.net/70vc1oLd/ .

在 Mac 上的 Firefox 中，我看不到任何图像。

Answer 1

这是可能的，但不推荐。您可以阅读有关 how to embed data uri in css 的信息在这里。

CSS

#myDiv {
  background: url(data:image/gif;base64,IMAGE-DATA-GOES-HERE) no-repeat;
}

话虽如此，您应该考虑将图像嵌入到 css 中的利弊:

优点

• 减少对服务器的请求。
• 图像与您的 CSS 代码一起缓存。

缺点

• CSS 文件变得更大，加载时间也更长。
• 它更难维护，因为在您的 css 文件中您甚至看不到图像的名称，因此您需要“记住”每个 css 属性中嵌入了哪个图像...
• 页面加载时间更长，因为浏览器等待完成加载 CSS - 现在比没有图像需要更长的时间。
• 图像和 CSS 文件请求无法并行加载，因为它们在单个请求中

如果您的图片数量较少，也许是您网站的基本图标，就可以了。如果您想将它用于高质量图像，它只会让您的页面加载 waaaaaayyyyy tooooo sloooowwwww ...