首頁猿問 img 和...

img 和 background-image 有什么優(yōu)劣之分嗎？

JavaScript

FFIVE 2019-04-13 08:36:56

是這樣的，像極端的情況比如整個(gè)頁面的背景，我會毫不猶豫的使用background-image，但是某一個(gè)單獨(dú)的圖片，比如logo，只要加載出來就行，也不需要對它做什么復(fù)雜的操作，我的理解是能在html里實(shí)現(xiàn)的就不要再去CSS里寫了，越簡單越好。但是看到一段代碼所有的圖片都是用div背景圖片寫的，我突然困惑了這樣到底是對是錯(cuò)？能否有人給我講一下優(yōu)劣？比如是加載方面有區(qū)別？SEO區(qū)別？多謝啦！

查看完整描述

2 回答

米脂

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊

簡單來說，img是內(nèi)容部分的東西，background-image是修飾性的東西。稍微加點(diǎn)文字就是img從頁面元素來說，如果是頁面中的圖片是作為內(nèi)容出現(xiàn)的，比如廣告圖片，比如產(chǎn)品圖片，那么這個(gè)必然是用img了，因?yàn)檫@個(gè)是頁面元素內(nèi)容。頁面元素內(nèi)容最關(guān)鍵的一點(diǎn)就是，當(dāng)頁面沒有樣式的時(shí)候，還是能一眼看過去就知道什么是什么……background-image背景圖片，修飾性的內(nèi)容，在頁面中可有可無。有，是為了讓頁面中視覺感受上更美；無，并不影響用戶瀏覽網(wǎng)頁獲取內(nèi)容。裸奔其實(shí)說白了，背景圖片就是通過樣式加載后，讓頁面更漂亮而已，內(nèi)容圖片就是為了展示給用戶的。假設(shè)有一天你的網(wǎng)頁沒有任何樣式的時(shí)候，那么這個(gè)時(shí)候請想想你的網(wǎng)站上哪些圖片是給用戶看的，這樣就足夠了。

反對回復(fù) 2019-04-13

GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

前景圖img是數(shù)據(jù)性的東西，屬于頁面要展現(xiàn)的內(nèi)容。背景圖是修飾性的東西，不要也罷。比如，用戶圖像，肯定是前景圖了；產(chǎn)品列表的圖片，也是前景圖了。但是產(chǎn)品列表的圖片，有的左上方有個(gè)推薦的標(biāo)簽，減價(jià)的標(biāo)簽，肯定就是修飾咯。

反對回復(fù) 2019-04-13