您的位置：网站首页> 实例代码> CSS实例

CSS将背景图片集中在一张图片上

2017-12-5 12:40| 发布者: admin| 查看: 1153| 评论: 0|来自: 蚂蚁部落

背景图片的应用有两种方式:

（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定位详解一章节。

鲜花

握手

雷人

路过

鸡蛋

收藏分享

上一篇：div宽度根据内容自适应下一篇：CSS去掉最后一行的分割线

CSS将背景图片集中在一张图片上

最新评论