<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
background-color: yellow;
background-image: url("1.png");
background-repeat: no-repeat;
a:link{
background-image: url("3.jpg");
}
/*background-position: 10px 20px; 水平方向，、垂直方向*/
}
body{
background-attachment: fixed; /*fixed永远相对于浏览器窗口的定位，不随窗口而滚动*/
background-image: url("2.jpg");
}
a:link{
background-image: url("3.jpg");
}
a:hover{
background-image: url("4.jpg");
}
/*当鼠标移动到a上面时，才去加载4.jpg图片，所以鼠标移上去会闪一下，第二次便不会了，因为已经加载成功了*/
/*可以使用background-position: -10px 0px来切换图片的显示位置，这种技术叫做图片整合技术*/
/* 将多张图片整合在一张图片里，浏览器只需要发一次请求，便可以加载多图片，还减少了图片的总大小*/
.box2{
background: #bfa url("2.png") center center no-repeat;
/*简写*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<a href="#"></a>
</body>
</html>
