CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
先看下面这张300*300的大图片，每个小图标是100*100的。(这张图片名字叫9pic2.jpg)
首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{
background-image
:
url
(
9
pic
2
.jpg);
width
:
100px
;
height
:
100px
;
}
|
这么设置完毕后，大图片左上角那个小图标（这里假设是100*100的小图标）就出来了。
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合，但背景图片是可以移动的，由于浏览器坐标系x轴正向右，y轴正向下。所以，背景图片一般需要向左移动，和向上移动，这样移动的值往往都是负的。
比如上面第2张小图标，需要把大图片沿着x方向向左移动100px，y方向不变，设置background-position属性如下：
#item
2
{
background-position
:
-100px
0
;
}
|
其他的同理。
最后贴出来一个例子，看明白了这个属性就懂了。
用到的另一张图片名字叫9pic1.jpg,先贴出来：
代码如下：
<!doctype html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>背景background-position切图</title>
<style>
.showImage{
background-image
:
url
(
9
pic
2
.jpg);
width
:
100px
;
height
:
100px
;
}
.showImage:hover{
background-image
:
url
(
9
pic
1
.jpg);
}
ul{
}
ul li{
float
:
left
;
margin
:
20px
;
}
#item
1
{
background-position
:
0
0
;
}
#item
2
{
background-position
:
-100px
0
;
}
#item
3
{
background-position
:
-200px
0
;
}
#item
4
{
background-position
:
0
-100px
;
}
#item
5
{
background-position
:
-100px
-100px
;
}
#item
6
{
background-position
:
-200px
-100px
;
}
#item
7
{
background-position
:
0
-200px
;
}
#item
8
{
background-position
:
-100px
-200px
;
}
#item
9
{
background-position
:
-200px
-200px
;
}
</style>
</head>
<body>
<div class=
"container"
>
<ul>
<li id=
"item1"
class=
"showImage"
></li>
<li id=
"item2"
class=
"showImage"
></li>
<li id=
"item3"
class=
"showImage"
></li>
<li id=
"item4"
class=
"showImage"
></li>
<li id=
"item5"
class=
"showImage"
></li>
<li id=
"item6"
class=
"showImage"
></li>
<li id=
"item7"
class=
"showImage"
></li>
<li id=
"item8"
class=
"showImage"
></li>
<li id=
"item9"
class=
"showImage"
></li>
</ul>
</div>
</body>
</html>
|
2414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
