background-attachment属性
通过对background-attachment属性的学习，辨析每个属性值之间的区别。
1.fixed与scroll的区别 
background-attachment:fixed；当滚动页⾯滚动条时背景图⽚位置保持不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 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 ></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>
html滚动效果代码div {
width: 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 ></span></div>
<p ></p>
</body>
</html>
  注意：让容器有滚动条效果需加上overflow:scroll;
background-attachment:local；当滚动当前容器滚动条时背景图⽚随内容滚动（将之前代码的scroll改为local即可看到⼆者区别）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。