很多時(shí)候我們?cè)趯?xiě)CSS3代碼的時(shí)候需要使用到base64字符串，例如：

.content a {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;}

那么如何才能獲得呢？

要獲得圖片base64字符串，一般是通過(guò)相關(guān)軟件或工具來(lái)實(shí)現(xiàn)，網(wǎng)上也有相關(guān)的在線轉(zhuǎn)換工具，不過(guò)今天361模板要介紹的是使用我們?nèi)粘５臑g覽器就可以輕松幫我們實(shí)現(xiàn)，包括360/Chrome/Firefox瀏覽器。

用360和chrome瀏覽器獲得圖片base64字符串

首先介紹如何用360和chrome瀏覽器獲得圖片base64字符串，這兩瀏覽器的操作方法是一樣的（360用的是chrome內(nèi)核）。

1、對(duì)于本地圖片，先把瀏覽器窗口縮小，然后把圖片拖到瀏覽器里。對(duì)于網(wǎng)絡(luò)圖片，可以直接用瀏覽器訪問(wèn)圖片地址來(lái)打開(kāi)圖片。

用瀏覽器打開(kāi)圖片

2、打開(kāi)本地圖片或網(wǎng)絡(luò)圖片后，按“Ctrl+Shift+I” 打開(kāi)開(kāi)發(fā)者工具。點(diǎn)擊“Sources”標(biāo)簽，再雙擊左側(cè)的圖片文件名，這時(shí)，右側(cè)就會(huì)顯示該圖片的base64字符串了。

獲得圖片的base64字符串

用Firefox瀏覽器獲得圖片base64字符串

1、與360/Chrome瀏覽器一樣，對(duì)于本地圖片，先把瀏覽器窗口縮小，然后把圖片拖到瀏覽器里。對(duì)于網(wǎng)絡(luò)圖片，可以直接用瀏覽器訪問(wèn)圖片地址來(lái)打開(kāi)圖片。

2、打開(kāi)本地圖片或網(wǎng)絡(luò)圖片后，按“Ctrl+Shift+I”打開(kāi)開(kāi)發(fā)者工具。

3、右鍵點(diǎn)擊圖片代碼，點(diǎn)擊菜單里的“復(fù)制圖像數(shù)據(jù)”，粘貼到記事本或任何編輯器，這段就是該圖片的base64字符串了。

復(fù)制圖像數(shù)據(jù)（點(diǎn)擊圖片放大）

學(xué)會(huì)使用360/Chrome/Firefox瀏覽器輕松獲得圖片base64字符串的方法，我們就不用再去下載安裝某些轉(zhuǎn)換軟件了，也不用辛苦在網(wǎng)上找在線轉(zhuǎn)換工具了。