css--圖片整合（精靈圖）

opengps 發(fā)布于2019-08-30 15:54 / 2801人閱讀

摘要：通用代碼如下圖片整合運(yùn)行結(jié)果總結(jié)精靈圖可以通過浮動加背景圖片來實(shí)現(xiàn)精靈圖也可以通過也可以實(shí)現(xiàn)主要是后期的定位移動。

圖片整合（精靈圖） 精靈圖的優(yōu)點(diǎn)：

減少圖片的字節(jié)

減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能

解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。

更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。

通用代碼如下：

    



圖片整合

運(yùn)行結(jié)果：

總結(jié)：

精靈圖可以通過浮動加背景圖片來實(shí)現(xiàn)

精靈圖也可以通過ul也可以實(shí)現(xiàn)主要是后期的定位移動。

GPU云服務(wù)器云服務(wù)器 html 精靈圖 html精靈圖引入圖片css css圖片自適應(yīng)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116936.html

相關(guān)文章

css--圖片整合（精靈圖）

摘要：通用代碼如下圖片整合運(yùn)行結(jié)果總結(jié)精靈圖可以通過浮動加背景圖片來實(shí)現(xiàn)精靈圖也可以通過也可以實(shí)現(xiàn)主要是后期的定位移動。圖片整合（精靈圖）精靈圖的優(yōu)點(diǎn)：減少圖片的字節(jié) 減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。更換風(fēng)格方便，只需要在一張或少張圖...

張春雷 2019-08-02 10:59 評論0 收藏0
css圖像拼合技術(shù)（精靈圖）

摘要：圖像拼合技術(shù)圖像拼合圖像拼合技術(shù)就是單個圖像的集合。有很多圖片的網(wǎng)頁可能會需要很多時間來加載和生成多個服務(wù)器的請求。使用圖像拼合會降低服務(wù)器的請求數(shù)量，并節(jié)省帶寬。 CSS圖像拼合技術(shù) 1.圖像拼合圖像拼合技術(shù)就是單個圖像的集合。有很多圖片的網(wǎng)頁可能會需要很多時間來加載和生成多個服務(wù)器的請求。使用圖像拼合會降低服務(wù)器的請求數(shù)量，并節(jié)省帶寬。圖像拼合實(shí)例 showImg(ht...

lolomaco 2019-08-02 10:59 評論0 收藏0
css圖像拼合技術(shù)（精靈圖）

摘要：圖像拼合技術(shù)圖像拼合圖像拼合技術(shù)就是單個圖像的集合。有很多圖片的網(wǎng)頁可能會需要很多時間來加載和生成多個服務(wù)器的請求。使用圖像拼合會降低服務(wù)器的請求數(shù)量，并節(jié)省帶寬。 CSS圖像拼合技術(shù) 1.圖像拼合圖像拼合技術(shù)就是單個圖像的集合。有很多圖片的網(wǎng)頁可能會需要很多時間來加載和生成多個服務(wù)器的請求。使用圖像拼合會降低服務(wù)器的請求數(shù)量，并節(jié)省帶寬。圖像拼合實(shí)例 showImg(ht...

SoapEye 2019-08-30 15:54 評論0 收藏0
HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當(dāng)前頁面跳轉(zhuǎn)到指定頁面屬性設(shè)置指定跳轉(zhuǎn)頁面的路徑路徑分類相對路徑相對于當(dāng)前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當(dāng)前html頁面跳轉(zhuǎn)到指定html頁面屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑 ...

cocopeak 2019-08-29 16:34 評論0 收藏0
HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當(dāng)前頁面跳轉(zhuǎn)到指定頁面屬性設(shè)置指定跳轉(zhuǎn)頁面的路徑路徑分類相對路徑相對于當(dāng)前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當(dāng)前html頁面跳轉(zhuǎn)到指定html頁面屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑 ...

elisa.yang 2019-08-02 11:21 評論0 收藏0