css - 在样式表中嵌入图像而不是使用 img 标签

Question

我遇到了这段代码

 .happy-icon
    height 22px
    width 22px
    background base64('../assets/pencil-default.png') no-repeat center

将此图像嵌入样式表而不是标记有什么好处？使用base64调用有什么优势？

根据我收到的一些回复.. 如果这是为了优化..那么图像只能在我假设的一个地方使用..

所以考虑到下面的..图像将被转换成数据字符串两次并且不必要地增加 css 的大小...我说得对吗？

.class-1
   base64('../some-image.jpg')

.class-2
   base64('../some-image.jpg')

Answer 1

它可以节省 HTTP 请求，从而优化您的网站速度，因为 base64 会将图像转换为数据字符串。但是，您编写它的方式行不通，您需要先将图像转换为 base64，然后使用该代码

https://css-tricks.com/data-uris/