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

qincidong

浏览: 226706 次
性别:
来自: 北京

最近访客更多访客>>

abcd2010

qq1002517

samwong

OMGlalala

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Js+Css+Html

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

如图(1)

代码：

01

<style type="text/css">   

02
<!--   

03
.bg{  

04
WIDTH: 181px;  

05
HEIGHT: 61px;  

06
}  

07
.bg .logo {  

08
POSITION: relative; WIDTH: 181px; BACKGROUND: url(./logo.gif) 0px 0px; FLOAT: left; HEIGHT: 60px;  

09
}  

10
}  

11

--> 

12

</style>   

13

<body>  

14

<div class="bg">  

15

<div class="logo"></div>  

16

</body>

关键代码：

1
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.代码：

1
.bg .logo {  

2

3

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

4

5
}

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

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

1
.bg .logo {  

2

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

3
}
文章转载http://w3note.com/web/53.html

分享到：

Java注解 | Apache2+Tomcat7集群实现

2013-08-15 10:46
浏览 990
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论