国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

css Sprites小實例代碼

2020-10-23 18:34:45
字體：大 中 小
來源：轉載
供稿：網友

這是一個很簡單的應用，不過在設計中，這樣做可以減輕服務器的壓力，是請求次數減少，是一個不錯的方法。
特別要說明的是，在這種小圖片上即使是兩張圖片其實就響應時間來說也慢不了多少，不過有一個問題，就是兩張圖片交替時容易出現背景圖片從新加載而導致很段時間不顯示的效果。（時間長短視服務器的響應速度和圖片大小而變化）

下面是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;//在這里規定從某一坐標開始顯示圖片}


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

background-position:* *px;


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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板： 宁德市| 绥中县| 民乐县| 深水埗区| 民权县| 双流县| 安阳县| 金秀| 宜春市| 临颍县| 漳平市| 拉萨市| 通榆县| 泰州市| 湖北省| 吉隆县| 赫章县| 加查县| 库车县| 三江| 龙州县| 翁源县| 昌邑市| 庆城县| 天全县| 盘锦市| 定襄县| 亳州市| 双桥区| 迁安市| 阳信县| 咸阳市| 新丰县| 瑞丽市| 重庆市| 西宁市| 江津市| 巴楚县| 桦甸市| 萨嘎县| 临夏县|