cssSprites小實(shí)例代碼_經(jīng)驗(yàn)交流

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:55:25

cssSprites小實(shí)例代碼_經(jīng)驗(yàn)交流

cssSprites小實(shí)例代碼_經(jīng)驗(yàn)交流:這是一個(gè)很簡(jiǎn)單的應(yīng)用，不過在設(shè)計(jì)中，這樣做可以減輕服務(wù)器的壓力，是請(qǐng)求次數(shù)減少，是一個(gè)不錯(cuò)的方法。特別要說明的是，在這種小圖片上即使是兩張圖片其實(shí)就響應(yīng)時(shí)間來說也慢不了多少，不過有一個(gè)問題，就是兩張圖片交替時(shí)容易出現(xiàn)背景圖片從新加載而導(dǎo)致

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀cssSprites小實(shí)例代碼_經(jīng)驗(yàn)交流:這是一個(gè)很簡(jiǎn)單的應(yīng)用，不過在設(shè)計(jì)中，這樣做可以減輕服務(wù)器的壓力，是請(qǐng)求次數(shù)減少，是一個(gè)不錯(cuò)的方法。特別要說明的是，在這種小圖片上即使是兩張圖片其實(shí)就響應(yīng)時(shí)間來說也慢不了多少，不過有一個(gè)問題，就是兩張圖片交替時(shí)容易出現(xiàn)背景圖片從新加載而導(dǎo)致

這是一個(gè)很簡(jiǎn)單的應(yīng)用，不過在設(shè)計(jì)中，這樣做可以減輕服務(wù)器的壓力，是請(qǐng)求次數(shù)減少，是一個(gè)不錯(cuò)的方法。
特別要說明的是，在這種小圖片上即使是兩張圖片其實(shí)就響應(yīng)時(shí)間來說也慢不了多少，不過有一個(gè)問題，就是兩張圖片交替時(shí)容易出現(xiàn)背景圖片從新加載而導(dǎo)致很段時(shí)間不顯示的效果。（時(shí)間長(zhǎng)短視服務(wù)器的響應(yīng)速度和圖片大小而變化）

下面是css的部分：

body {
font-family: "Lucida Sans", "Lucida Sans Unicode";
font-size: 14px;
line-height: 24px;
}
ul {
list-style-type: none;
}
li {
float: left;

}
a{
background-image: url(bg.gif);
height: 26px;
background-position: 53px 0px;
display: block;
margin-right: 10px;
width: 53px;
text-align: center;
color: #333333;
}

li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
}
li a:hover {
text-decoration: none;
background-position: 0 0px;//在這里規(guī)定從某一坐標(biāo)開始顯示圖片}

從上面的代碼不難看出，這里面起決定性作用的是

background-position:* *px;

這樣，在復(fù)雜的css應(yīng)用中，我們便可以解決背景圖片從新加載的問題

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com