CSS背景圖片集中在同一個圖片

antzone發表於2018-07-16
CSS

現在比較常用的一個優化措施是將背景圖片都集中在一張圖片上。

這可以有效的減少請求次數，下面就是一個與此相關的程式碼例項供大家參考一下。

圖片如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/12/225608iwoydqsfb2b2qfbv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
ul {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
  border: 1px solid #ccc;
}
ul li {
  width: 63px;
  height: 48px;
  text-align: center;
  float: left;
}
ul li i {
  width: 32px;
  height: 28px;
  display: inline-block;
  background: url(data/attachment/forum/201609/09/184209tnzflph86hqn6ttw.png) no-repeat;
  margin-top: 30px;
  transition: all .2s linear;
  -webkit-transition: all .2s linear;
}
.icon1 {
  background-position: 0 -2px;
}
.icon2 {
  background-position: -66px -2px;
}
.icon3 {
  background-position: -132px -2px;
}
.icon4 {
  background-position: -192px -2px;
}
ul li:hover i.icon1 {
  background-position: 0px -39px;
}
ul li:hover i.icon2 {
  background-position: -66px -39px;
}
ul li:hover i.icon3 {
  background-position: -132px -39px;
}
ul li:hover i.icon4 {
  background-position: -192px -39px;
}
</style>
</head>
<body>
  <ul>
    <li>
      <i class="icon1"></i>
      <p>回覆</p>
    </li>
    <li>
      <i class="icon2"></i>
      <p>收藏</p>
    </li>
    <li>
      <i class="icon3"></i>
      <p>轉播</p>
    </li>
    <li>
      <i class="icon4"></i>
      <p>分享</p>
    </li>
  </ul>
</body>
</html>

實現的原理其實非常的簡單，就是通過background-position屬性來調節背景圖片的位置，以此顯示背景圖片不同的位置，於是就實現了顯示不同背景圖案的效果；更多內容可以參閱相關閱讀。

（1）.transition參閱CSS3 transition一章節。

（2）.background-position參閱CSS background-position一章節。

相關文章