专注于WEB技术的IT博客

css中使用一张图片显示多个背景

时间:2012-11-29分类: Css浏览:8168
分享到:

     不知你有没有经历过,看到网页上的一些漂亮的图标,如列表图标,于是把它下载,打开一看,竟然不是我们下载的单个图标,而是一张大图,上面集合着许多小图标!
这里便使用了CSS中一张图片显示多个背景的方法
这些小图标为什么不是分别存储成单独的图标,而是集合放在一张图片上?这样做的目的就是减少http请求次数,节省时间和带宽。
强烈推荐使用这种方法!
当然,实现的方法是有多种,下面将通过一个例子来说一下我常使用的方法。
1、显示完整的图片

如图(1)

代码:

<style type="text/css">  
<!--  
.bg{ 
WIDTH: 181px; 
HEIGHT: 61px; 
} 
.bg .logo { 
POSITION: relative; WIDTH: 181px; BACKGROUND: url(./logo.gif) 0px 0px; FLOAT: left; HEIGHT: 60px; 
} 
} 
--> 
</style>  
<body> 
<div class="bg"> 
<div class="logo"></div> 
</body>

关键代码:

POSITION: relative; WIDTH: xpx; BACKGROUND: url(image) x1px y1px; FLOAT: left; HEIGHT: ypx;

POSITION属性说明:
relative--相对定位
WIDTH--图片显示的宽度
image --背景图片(这里是图片的地址)
x1px--图片水平位置偏移量,起点为(0,0),如取负值将向反方向偏移
y1px---图片竖直位置偏移量
FLOAT--图片浮动方向,如left,right
HEIGHT--图片显示的高度

现在我们将在上面的位置为参照物显示图片不同区域。
1.1、只显示图片中的“W‘

如图(2):

图示显示部分WIDTH: 75px,HEIGHT: 60px,图片水平向左偏移3px.代码:

.bg .logo { 
      
    POSITION: relative; WIDTH: 75px; BACKGROUND: url(./logo.gif) -3px 0px; FLOAT: left; HEIGHT: 60px; 
      
}

1.2、只显示图片中的一个“B“,如图(3)


图示显示部分WIDTH: 38px,HEIGHT: 60px,图片水平向左偏移78px,竖直向下偏120px,代码:

.bg .logo { 
    POSITION: relative; WIDTH: 38px; BACKGROUND: url(./logo.gif) -78px 120px; FLOAT: left; HEIGHT: 60px 
}



猜你喜欢
bootstrap布局篇详解(二)
bootstrap布局篇详解(一)
Bootstrap“减肥”优化攻略
使用Bootstrap轻松打造你的网站
有了Bootstrap再也不担心网站的前端设计
nec更好的解决css方案
几款纯css打造的超酷按钮实例
推荐一款tab切换(js+css)
兼容主流浏览器的css渐变色
960网格系统模板设计的利器
标签 : css
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/53.html,谢谢。
  • 评论
  • 赞助本站