很多時候我們在寫CSS3代碼的時候需要使用到base64字符串，例如：

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

那么如何才能獲得呢？

要獲得圖片base64字符串，一般是通過相關軟件或工具來實現，網上也有相關的在線轉換工具，不過今天361模板要介紹的是使用我們日常的瀏覽器就可以輕松幫我們實現，包括360/Chrome/Firefox瀏覽器。

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

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

1、對于本地圖片，先把瀏覽器窗口縮小，然后把圖片拖到瀏覽器里。對于網絡圖片，可以直接用瀏覽器訪問圖片地址來打開圖片。

用瀏覽器打開圖片

2、打開本地圖片或網絡圖片后，按“Ctrl+Shift+I” 打開開發者工具。點擊“Sources”標簽，再雙擊左側的圖片文件名，這時，右側就會顯示該圖片的base64字符串了。

獲得圖片的base64字符串

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

1、與360/Chrome瀏覽器一樣，對于本地圖片，先把瀏覽器窗口縮小，然后把圖片拖到瀏覽器里。對于網絡圖片，可以直接用瀏覽器訪問圖片地址來打開圖片。

2、打開本地圖片或網絡圖片后，按“Ctrl+Shift+I”打開開發者工具。

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

復制圖像數據（點擊圖片放大）

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