背景：
background-image:url(img/2.jpg) url里只能相对路径
背景大于图片，图片会默认平铺充满
background-repeat:no-repeat; 一个图
background-repeat-x; 一横排
background-repeat-y; 一竖排
背景偏移定位：
background-position:top left;
background-position:100px 10px; 右移100 下移10
background-position:-100px -10px; 左移100 上移10
只给一个值，第二个值默认center
background-attachment:fixed; 相对浏览器窗口固定，不随窗口滚动 给body设
电驴导航条：
可截取一小条平铺设置背景色(适用渐变色)
雪碧图：多张图片整合为一张，同时加载，浏览器只发生一次请求，加载过的缓存起来，再次使用不用重新请求。
.btn{
display:block;
width: 93px;
height: 29px;
background-image: url(img/btn.png);
background-repeat: no-repeat;
}
.btn(移入):hover{
background-image:url(img/btn.png);
background-position:-93px 0px;
}
.btn(摁下):active{
background-image:url(img/btn.png);
background-position: -93px 0px;
}
雪碧图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图</title>
<link rel="stylesheet" type="text/css" href="CSS2/style.css">
</style>
</head>
<body>
<a href="#" class='amazon'></a>
</body>
</html>
样式：
.amazon:link{
display:block;
width: 45px;
height: 30px;
background-image:url(img/amazon-sprite_.png);
background-repeat: no-repeat;
background-position: -10px -338px;
}
.amazon:hover{
background-image:url(img/amazon-sprite_.png);
background-position: -55px -338px;
}
.amazon:active{
background-image: url(img/amazon-sprite_.png);
background-position:-55px -338px;
}
网友评论