如何在CSS文件中对base-64编码PNG图像以用于data-uri？

我想base-64编码一个PNG文件，将其包含在我的样式表中的data：url中。我怎样才能做到这一点？如何在CSS文件中对base-64编码PNG图像以用于data-uri？

我在Mac上，所以Unix命令行上的东西会很好。基于Python的解决方案也将是盛大的。

2011-06-16 Paul D. Waite

这应该做它在Python：

import base64 
encoded = base64.b64encode(open("filename.png", "rb").read())

来源

2011-06-16 17:20:40 Jon

，看起来不错。当我尝试在CSS文件中使用结果时，Firefox目前告诉我图像已损坏或被截断，但我可能在某处出错。 – 2011-06-16 17:32:02

@Paul D. Waite：Base64输出是什么样的，你如何在你的CSS中使用它？ – BoltClock 2011-06-16 18:09:38

@BoltClock：我得到的输出是'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs + 9AAAAP0lEQVQY02P4/fv3f1z4ypUrcDYD \ niIOMkQEyH6tCdDEQZkDWRZKJ6CajKEQ3BV0Mr4noGhiw6SbJjVhNJEYhAKztct58fLlaAAAAAElF \ nTkSuQmCC \ N'。在我的CSS文件，它看起来像'背景图像：网址（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs + 9AAAAP0lEQVQY02P4/fv3f1z4ypUrcDYD \ niIOMkQEyH6tCdDEQZkDWRZKJ6CajKEQ3BV0Mr4noGhiw6SbJjVhNJEYhAKztct58fLlaAAAAAElF \ nTkSuQmCC \ n）;'。 – 2011-06-16 18:43:59

这应该做到这一点在的Unix：

b64encode filename.png X | sed '1d;$d' | tr -d '\n' > b64encoded.png

通过b64encode产生的经编码的图像包括页眉和页脚和没有线长于76个字符。这种格式在SMTP通信中是典型的。

要使编码图像可嵌入到HTML/CSS中，sed和tr命令分别删除页眉/页脚（第一行&最后一行）和所有换行符。

然后，只需简单地使用长编码字符串在HTML

<img src="data:image/png;base64,ENCODED_PNG">

或CSS

url(data:image/png;base64,ENCODED_PNG)

来源

2013-12-09 09:58:24

在一些发行版中不包含'b64encode'。在这种情况下，你会想使用'uuencode -m'，这是一个同义词。 – matth 2016-02-03 07:24:20

如何在CSS文件中对base-64编码PNG图像以用于data-uri？

回答

相关问题