訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

css背景使用base64編碼或者將base64編碼放在img圖片標簽中

2020/5/4 15:19:18 字體: 瀏覽 7368

css背景使用base64編碼或者將base64編碼放在img圖片標簽中


將圖片轉為base64編碼然后放在css的background背景中使用或者放在前臺 img 圖片標簽中直接使用
減少HTTP請求,加快小圖像或者小圖標的加載時間。

// Base64 在CSS中背景圖使用
.diymenu {
  background-image: url("data:image/png;base64,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");
}
// Base64 在HTML中的使用
<img src="data:image/png;base64,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" />


經過Base64 編碼后的文件體積一般比源文件大 30% 左右。
*請上傳小于300KB的.jpg/.jpeg/.gif/.bmp/.png/.ico格式圖片,不建議將大圖轉換。

相關閱讀
CSS布局實例:上中下三行,中間自適應
CSS的常用的一些技巧
山西省太原夏日陽光國際旅行社
生成隨機字符串的函數
針對新的百度采集系統進行的文章內容SEO基本優化原則
四川悠旅地旅游有限公司
支持火狐,IE6.ie7.ie8.ie9的加入收藏/設為首頁代碼
網頁添加WhatsApp跳轉鏈接教程
共有0條關于《css背景使用base64編碼或者將base64編碼放在img圖片標簽中》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
jquery設置或獲取修改classname
利用css3.0寫出一個音樂播放的唱片碟盤的效果
利用css中的scale()實現放大縮小效果
利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數字讓背景色透明
css背景使用base64編碼或者將base64編碼放在img圖片標簽中
利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉
更多>>最新添加文章
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
更多>>隨機抽取信息
asp利用函數生成指定位數的隨機數字符串
ASP把數字用逗號每3位隔開顯示代碼
旅行社網站模板9
asp正則表達式 替換HTML源文件里的鏈接地址
html表單里面的label詳細
網站頁面重新構寫,正在驗證其它瀏覽器
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414