通过对background-attachment属性的学习，辨析每个属性值之间的区别。
1.fixed与scroll的区别
background-attachment:fixed;当滚动页面滚动条时背景图片位置保持不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
400px;
height: 500px;
/*overflow: scroll;*/
/*background-color: #ccc;*/
background-image: url("images/1.jpg");
/*background-repeat: round;*/
/*background-repeat: space;*/
background-attachment: fixed;
/*background-attachment: scroll;*/
/*background-attachment: local;*/
}
</style>
</head>
<body>
<div class="dv"></div>
<p style="height:1800px"></p>
</body>
</html>
background-attachment:scroll;当滚动页面滚动条时背景图片随着页面一起滚动（将之前代码的fixed改为scroll即可看到二者区别）。
2.scroll与local的区别（这个区别是相对于当前容器而非整个页面）
background-attachment:scroll;当滚动当前容器滚动条时背景图片位置保持不变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
400px;
height: 500px;
overflow: scroll;
/*background-color: #ccc;*/
background-image: url("images/1.jpg");
/*background-repeat: round;*/
/*background-repeat: space;*/
/*background-attachment: fixed;*/
background-attachment: scroll;
/*background-attachment: local;*/
}
</style>
</head>
<body>
<div class="dv"><span style="height:800px;display:block"></span></div>
<p style="height:1800px"></p>
</body>
</html>
注意：让容器有滚动条效果需加上overflow:scroll;
background-attachment:local;当滚动当前容器滚动条时背景图片随内容滚动（将之前代码的scroll改为local即可看到二者区别）。