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

蔚落 2022-04-14 05:38 528阅读 0赞

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

如图(1)

![20121129001755368.png][]

代码：

<table> 
 <tbody> 
  <tr> 
   <td><code>01</code></td> 
   <td> <code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;&nbsp;&nbsp; </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>04</code></td> 
   <td><code>WIDTH: 181px;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>05</code></td> 
   <td><code>HEIGHT: 61px;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>08</code></td> 
   <td><code>POSITION: relative; WIDTH: 181px; BACKGROUND: url(./logo.gif) 0px 0px; FLOAT: left; HEIGHT: 60px;&nbsp; </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>12</code></td> 
   <td> <code>&lt;/</code><code>style</code><code>&gt;&nbsp;&nbsp; </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>14</code></td> 
   <td> <code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"bg"</code><code>&gt;&nbsp; </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>15</code></td> 
   <td> <code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"logo"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;&nbsp; </code> </td> 
  </tr> 
 </tbody> 
</table>

关键代码：

<table> 
 <tbody> 
  <tr> 
   <td><code>1</code></td> 
   <td><code>POSITION: relative; WIDTH: xpx; BACKGROUND: url(image) x1px y1px; FLOAT: left; HEIGHT: ypx;</code></td> 
  </tr> 
 </tbody> 
</table>

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

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

如图(2):

![20121129002008636.png][]

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

<table> 
 <tbody> 
  <tr> 
   <td><code>3</code></td> 
   <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>POSITION: relative; WIDTH: 75px; BACKGROUND: url(./logo.gif) -3px 0px; FLOAT: left; HEIGHT: 60px;&nbsp; </code> </td> 
  </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
  <tr> 
   <td><code>2</code></td> 
   <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>POSITION: relative; WIDTH: 38px; BACKGROUND: url(./logo.gif) -78px 120px; FLOAT: left; HEIGHT: 60px&nbsp; </code> </td> 
  </tr> 
 </tbody> 
</table>

文章转载[http://w3note.com/web/53.html][http_w3note.com_web_53.html]

[20121129001755368.png]: http://www.w3note.com/Public/ueditor/php/upload/45961354119886.png
[20121129002008636.png]: http://www.w3note.com/Public/ueditor/php/upload/43471354119886.png
[20121129002311283.png]: http://www.w3note.com/Public/ueditor/php/upload/8311354119886.png
[http_w3note.com_web_53.html]: http://w3note.com/web/53.html