php根据值加载不同背景图片,css中使用一张图片显示多个背景

关键代码：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

}