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

張春雷發(fā)布于2019-08-02 10:59 / 3139人閱讀

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

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

減少圖片的字節(jié)

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

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

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

通用代碼如下：

    



圖片整合

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

總結(jié)：

精靈圖可以通過(guò)浮動(dòng)加背景圖片來(lái)實(shí)現(xiàn)

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

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

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

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

相關(guān)文章

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

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

opengps 2019-08-30 15:54 評(píng)論0 收藏0
css圖像拼合技術(shù)（精靈圖）

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

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

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

SoapEye 2019-08-30 15:54 評(píng)論0 收藏0
HTML與CSS中的,鏈接與圖像個(gè)人分享

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

cocopeak 2019-08-29 16:34 評(píng)論0 收藏0
HTML與CSS中的,鏈接與圖像個(gè)人分享

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

elisa.yang 2019-08-02 11:21 評(píng)論0 收藏0