首页 > 蚂蚁部落 > 正文

CSS将背景图片集中在一张图片上
2017-12-27 09:19:51   来源:   评论:0 点击:

背景图片的应用有两种方式:(1) 将每一个背景都独立成一张图片单独使用。(2) 将所有的背景图片都集中在一张图片上,利用background结合

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

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

相关热词搜索:

上一篇:CSS div宽度根据内容自适应
下一篇:JavaScript类似c#字符串处理方法format()

分享到: 收藏
评论排行