css（CSS Sprites精靈圖）

時(shí)間：2023-07-22 20:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-22 20:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

css（CSS Sprites精靈圖）：

什么是CSS Sprites

CSS Sprites通常被稱為css精靈圖， 在國(guó)內(nèi)也被意譯為css圖片整合和css貼圖定位，也有人稱他為雪碧圖。 就是將導(dǎo)航的背景圖，按鈕的背景圖等有規(guī)則的合并成一張背景圖，即多張圖合 并為一張整圖， 然后再利用background-position進(jìn)行背景圖定位的一種技術(shù)

為什么需要css sprites

CSS Sprites 并不是一門新的技術(shù)了，目前他發(fā)展的已經(jīng)比較成熟，阿里巴巴、百度、谷歌 等各公司的網(wǎng)頁(yè)中到處都可以發(fā)現(xiàn)CSS Sprites 的影子。

他是網(wǎng)頁(yè)里常見(jiàn)的一種圖片應(yīng)用處理方式，他允許你將一個(gè)頁(yè)面里所涉及到的所=有的零星 的圖片都整合到一張大圖中去，這樣一來(lái)，當(dāng)訪問(wèn)這個(gè)頁(yè)面時(shí)，所加載的圖片就不會(huì)像以前那樣 一張一張的慢慢顯示出來(lái)了，對(duì)于當(dāng)前的網(wǎng)絡(luò)所流行的速度來(lái)說(shuō)，不超出200kb的單張圖片所需 要的加載時(shí)間基本是差不多的，節(jié)省加載速度的關(guān)鍵不是降低重量，而是減少個(gè)數(shù)，就因?yàn)橛?jì)算 機(jī)都是按照byte計(jì)算。頁(yè)面每顯示一張圖片都會(huì)向服務(wù)器發(fā)送一次請(qǐng)求。所以，圖片越多，所請(qǐng) 求的次數(shù)就越多。

為了減少HTTP的請(qǐng)求次數(shù)，很多網(wǎng)站的導(dǎo)航背景圖、登錄框、按鈕背景圖等使用的并不是 <img>標(biāo)簽，而是CSS Sprite

css sprites的優(yōu)勢(shì)

優(yōu)勢(shì)：通過(guò)整合圖片，減少對(duì)服務(wù)器的請(qǐng)求數(shù)量，減少圖片的體積從而減輕服務(wù) 器的負(fù)擔(dān)，提高網(wǎng)頁(yè)的加載速度

CSS Sprites實(shí)現(xiàn)方法

其中小圖之間的排版是有些點(diǎn)規(guī)律的，比如說(shuō)淘寶這張 用到的css屬性是background-image、 background-position、background-repeat、這幾個(gè)屬性

首先這些素材圖標(biāo)都是用ps放在同一張圖片上， 然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。background-position:-8px -95px;

滑動(dòng)門技術(shù)

通過(guò)滑動(dòng)門技術(shù)，可以使CSS設(shè)計(jì)出來(lái)的導(dǎo)航菜單兼具傳統(tǒng)布局的圖像效果與CSS布局的高效擴(kuò)展性。

什么是滑動(dòng)門 ，它是一個(gè)形象的稱呼，它利用CSS背景圖像可層疊性，并允許彼此之上進(jìn)行滑動(dòng)來(lái)創(chuàng)造一些特殊動(dòng)態(tài)效果。

實(shí)現(xiàn)原理： 滑動(dòng)門技術(shù)主要用于制作寬或高度自適的效果中，它本身就利用了滑動(dòng)窗戶的原理，兩扇窗戶完 全展開(kāi)那么寬度就寬，如果兩扇重疊的話那么就窄，利用這個(gè)原理我們就可以通過(guò)兩張背景圖做 為兩扇窗戶，通過(guò)背景圖片的重疊展開(kāi)過(guò)程實(shí)現(xiàn)寬或高的自適應(yīng)效果

清除浮動(dòng)

clear:left/right/both;left 清除左浮動(dòng)right 清除右浮動(dòng)both 清除兩邊浮動(dòng)