CSS基础(二) 精灵图标 图片廊 背景
1.精灵图标
在一张大图里面找到不同的小图,<background-image>
是大图,通过确定不同的坐标<background-position>
来显示小图标
<style>
#pic1,#pic2,#pic3,#pic4{
border: 1px solid #0000EE;
float: left;
width: 80px;
height: 80px;
background-image: url(img/a.png);
background-repeat: no-repeat;}
#pic1{
background-position:-180px -3px;}
#pic2{
background-position:-505px -100px}
#pic3{
background-position:-180px -190px;}
#pic4{
background-position:-650px -270px;}
</style>
<body>
<div id="pic">
<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>
<div id="pic4"></div>
</div>
</body>
2.图片廊
<style>
div.img{
margin: 10px;
border: 1px solid #5F9EA0;
float: left;}
div.img:hover{