css精灵图
background
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
css精灵图小例子：
提前准备一张精灵图，如：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0;
}
ul {
list-style: none;
}
ul li {
float: left;
margin-right: 10px;
}
ul li div {
width:320px; height:180px;
background: gray;
}
ul li.a1:hover div {
background: url(images/css精灵图.jpg) 0 0;
}
ul li.a2:hover div {
background: url(images/css精灵图.jpg) -296px 0;
}
ul li.a3:hover div {
background: url(images/css精灵图.jpg) -618px 0;
}
ul li.a4:hover div {
background: url(images/css精灵图.jpg) -617px -184px;
}
</style>
<body>
<ul>
<li class="a1">
artea01
<div></div>
</li>
<li class="a2">
artea02
<div></div>
</li>
<li class="a3">
artea03
<div></div>
</li>
<li class="a4">
artea04
<div></div>
</li>
</ul>
</body>
</html>
浏览器F12进入调试模式，双击数值，按键盘上下键调整图片位置
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
