不知你有没有经历过，看到网页上的一些漂亮的图标，如列表图标，于是把它下载，打开一看，竟然不是我们下载的单个图标，而是一张大图，上面集合着许多小图标！
这里便使用了css中一张图片显示多个背景的方法
这些小图标为什么不是分别存储成单独的图标，而是集合放在一张图片上？这样做的目的就是减少http请求次数，节省时间和带宽。
强烈推荐使用这种方法！
当然，实现的方法是有多种，下面将通过一个例子来说一下我常使用的方法。
1、显示完整的图片
如图(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--图片显示的高度
SlipHover动画遮罩层显示插件下载SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。
现在我们将在上面的位置为参照物显示图片不同区域。
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 }本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
