快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

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

2017-12-5 12:40| 发布者: admin| 查看: 370| 评论: 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定位详解一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-1-19 09:28 , Processed in 0.088372 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部