剛剛接觸前端重構(gòu)的小伙伴或許會遇到一個問題,網(wǎng)頁中的圖片是做背景(寫在CSS中)好呢,還是寫在HTML標(biāo)簽中好呢?其實呢不同的場景、不同的項目需求下,選擇都會不一樣。我們先來分析一下網(wǎng)友的一些結(jié)論,并適當(dāng)吐槽下。
1.使用<img> 有一個好處是,用戶可以很方便的右鍵保存或者復(fù)制圖片的鏈接。
2.圖片做為背景,在圖片沒加載的時候或者加載失敗的時候,不會有個圖片的占位標(biāo)記,不會出現(xiàn)紅叉。
PS:一般圖片下載站會希望訪客、用戶去下載站內(nèi)的圖片,一般的企業(yè)或者站長其實并不希望同行或者競爭對手下載并盜用網(wǎng)站上的圖片。第二點出現(xiàn)紅叉應(yīng)該是古老的IE瀏覽器才會出現(xiàn),而且隨著寬帶網(wǎng)速的提升,這種情況并不多見。
3、 在網(wǎng)頁加載的過程中,以css背景圖存在的圖片會等到結(jié)構(gòu)加載完成(網(wǎng)頁的內(nèi)容全部顯示以后)才開始加載,而html中的<img>標(biāo)簽是網(wǎng)頁結(jié)構(gòu)(內(nèi)容)的一部分會在4.如果是裝飾性的圖片就寫在css里面,如果是內(nèi)容性的圖片就寫在html里面。 打個比方,你要做一個有漂亮邊框的相冊。那么修飾邊框的圖片就寫在css里面,相框里面的內(nèi)容照片就寫在html里面。
如下場景使用img標(biāo)簽比較合適:
1、使用IMG(alt文本)圖像有一個重要的語義時,比如一個警告圖標(biāo)。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。
2、如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯的效果時使用IMG。
3、如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG。
4、使用img代替有背景圖像可以顯著提高性能的動畫背景。
5、IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像,加載樣式表加載后,延遲加載的網(wǎng)頁。
如下場景使用background-image屬性比較合適:
1、如果圖像不是內(nèi)容的一部分時使用backgrond-image。
2、當(dāng)圖像代替文本使用時使用backgrond-image(避免出現(xiàn)無語義化標(biāo)簽)。
3、如果需要縮短下載時間通過CSS sprites 時使用backgrond-image。
4、如果你只需要展示圖像的一部分通過CSS sprites,時使用backgrond-image。
5、如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image。
上一篇:智慧賓館酒店微信解決方案!
下一篇:什么是css hack