如何在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？

回答

相關問題