CSS將背景圖片集中在一張圖片上

admin發表於2017-12-05
CSS

背景圖片的應用有兩種方式:

（1）.將每一個背景都獨立成一張圖片單獨使用。

（2）.將所有的背景圖片都集中在一張圖片上，利用background結合寬度和高度實現對背景圖片的設定。

後者優點非常明顯，可以減少對伺服器請求的次數，減輕伺服器壓力。

下面就簡單介紹一下如何實現此種效果。

背景圖片如下:

a:3:{s:3:\"pic\";s:43:\"portal/201712/05/124150ux7bbynwn2n6fplr.gif\";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>CSS如何將背景圖片集中在一張圖片上-螞蟻部落</title>
<style type="text/css">
div{
  height:28px; 
  width:300px;
  border-bottom:3px solid #E10001;
}
ul{
  list-style:none;
  margin:0px; 
  padding:0px;
}
ul li{
  float:left;
  width:87px;
  height:28px;
  margin-left:2px;
  display:inline;
} 
ul li a{
  width:87px;
  height:28px;
  display:block;
  font-size:14px;
  text-align:center;
  line-height:28px;
  text-decoration:none;
  color:#333;
  background:url(mytest/demo/nav_bg.gif) 0 -28px no-repeat;
}
ul .dangqian a{
  background:url(mytest/demo/nav_bg.gif) 0 0px no-repeat;
} 
ul li a:hover{
  background:url(mytest/demo/nav_bg.gif) 0 -56px no-repeat;
}
</style>
</head>
<body>
<div>
  <ul>
   <li class="dangqian"><a href="#">CSS專區</a></li>
   <li><a href="#">JS專區</a></li>
   <li><a href="#">HTML專區</a></li>
  </ul>
</div>
</body>
</html>

通過定位結合長寬尺寸來實現了我們想要的的效果。

background參閱background-position定位詳解一章節。

相關文章