兩者表現起來的效果是類似的,但是選用的時候應該有一些細微的區別。
區別如下:
- background-image無法使用懶加載,而img標簽可以通過設置其src進行懶加載的實現
- 加載順序不同: background-image是css屬性,img標簽中如果有src會立即請求,img會優先background-image進行請求
- 圖片設置性不同:background-image 可以借助其本身css屬性中的background-position、background-size來設置圖片展示的位置關系,大小顯示關系,而img標簽無法直接設置其圖片顯示位置
- img標簽能更好的SEO,是html標簽,代表文檔內容,而background-image屬于css,代表版式設計。而言之,img標簽能更好的SEO,而background-image更加靈活。