background-image是背景圖片,是css的一個樣式
< img / >是個區塊級元素,它是一個圖片,是html的標籤
background-image是只能看的
< img / >是可以操作的。例如更換img src的路徑可以達到更換圖片的目的,也可以移動它的位置,從document中移除等等動作
background是CSS3的樣式
img 是HTML的標籤,兩者之間存在本質的差異
background-image存在於大的background中,其屬性#設定多種多樣,變換較為豐富
img 上能寫字,能增加其餘想增加的元素
一般來說,如果是裝飾性的圖片就使用background-img,如果和文體內容很相關就使用img
在網頁載入的過程中,以css背景圖存在的圖片background-image會等到結構加載完成(網頁的內容全部顯示以後)才開始加載,而html中的標籤img是網頁結構(內容)的一部分會在加載結構的過程中加載,換句話說,網頁會先加載標籤img的內容,再加載背景圖片background-image,如果你用引入了一個很大的圖片,那麼在這張圖片下載完成前,img後面的內容都不會顯示。而如果用css來引入同樣的圖片,網頁結構和內容載入完成之後,才開始載入背景圖片,不會影響瀏覽網頁內容。
是這樣的,像極端的情況例如整個頁面的背景,我會毫不猶豫的使用background-image,但是某一個單獨的圖片,例如logo,只要加載出來就行,也不需要對它做什麼複雜的操作,我的理解是能在html裡實現的就不要再去CSS裡寫了,越簡單越好。但看到一段程式碼所有的圖片都是用div背景圖片寫的,我突然困惑了這樣到底是對是錯?能否有人跟我講一下優劣?例如載入方面有差別? SEO差別?多謝啦!
簡單來說,img是內容部分的東西,background-image是修飾性的東西。
稍微加點文字就是
img
從頁面元素來說,如果是頁面中的圖片是作為內容出現的,例如廣告圖片,例如產品圖片,那麼這必然是用img了,因為這個是頁面元素內容。頁面元素內容最關鍵的一點就是,當頁面沒有樣式的時候,還是能一眼看過去就知道什麼是什麼…
background-image
背景圖片,修飾性的內容,在頁面中可有可無。有,是為了讓頁面中視覺感受上更美;無,不影響使用者瀏覽網頁取得內容。
其實說穿了,背景圖片就是透過樣式載入後,讓頁面更漂亮而已,內容圖片就是為了展示給使用者看的。假設有一天你的網頁沒有任何樣式的時候,那麼這時候請想想你的網站上哪些圖片是給使用者看的,這樣就夠了。
前景圖img是資料性的東西,屬於頁面要展現的內容。
背景圖是修飾性的東西,不要也罷。
例如,使用者影像,肯定是前景圖了;產品清單的圖片,也是前景圖了。 但是產品清單的圖片,有的左上方有個推薦的標籤,減價的標籤,一定就是修飾咯。
以上是css中與