首頁 > web前端 > css教學 > 主體

css中的差別

黄舟
發布: 2017-06-21 14:13:43
原創
2424 人瀏覽過

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中的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板