css精灵图

css精灵图

artea奶茶

background

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

css精灵图小例子:
提前准备一张精灵图,如:
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进入调试模式,双击数值,按键盘上下键调整图片位置
css精灵图

上一篇:学成在线案例重做过程中出现的一些问题未解决03-----行内元素inline-block的问题(已解决)


下一篇:手风琴案例01