html使用img標簽和背景圖片之間的區別


1.加載問題

背景圖片會等到html結構加載完成才開始加載img標簽是網頁結構的一部分,會在html結構加載的時候加載在網頁加載的過程中,背景圖片會等到結構加載完成(網頁的內容全部顯示以后)才開始加載,而img標簽是網頁結構(內容)的一部分會在html結構加載的過程中加載,換句話講,網頁會先加載img標簽的內容,

再加載背景圖片,如果你用引入了一個很大的圖片,那么在這個圖片下載完成之前,img后的內容都不會顯示。而如果用css來引入同樣的圖片,網頁結構和內容加載完成之后,才開始加載背景圖片,不會影響你瀏覽網頁內容。(即,img是內容性的,背景圖是修飾性的)

 

2.加載失敗顯示問題

背景圖片在加載失敗或路徑找不到時,不會顯示圖片標記,img標簽在加載失敗或找不到路徑時,會顯示一個撕裂的小圖標標記

 

3.數據圖與非數據圖

所謂數據圖就是從后台獲取的圖片,一般就用img標簽顯示,其他的圖片一般就作為背景圖展示

攝圖網https://www.wode007.com/sites/73204.html VJ師網https://www.wode007.com/sites/73287.html

4.何時用img,何時用背景圖

1》使用img

  • 作為html結構內容的一部分
  • 展示從后台傳過來的數據
  • 對圖片進行縮放操作
  • 利於搜索引擎搜索時

2》使用背景圖

  • 不是html結構的一部分
  • 圖像代替文本使用時
  • 縮短下載時間時
  • 為不同的屏幕分辨率展示不同的圖像時(media查詢時使用背景圖)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM