background-attachment · 跟老司机学CSS3

**background-attachment** * 描述：设置对象的背景图是随对象内容滚动还是固定的 * 版本：CSS1 | CSS3 该属性在 CSS3 有修改 * 继承性：无 **语法** ``` background-attachment: 滚动值; ``` 滚动值 * scroll：默认值。背景图会随着页面其余部分的滚动而移动。 * fixed：背景图相对于窗体固定，当页面的其余部分滚动时，背景图像不会移动。 * inherit：从父元素继承 background-attachment 属性的设置。 * local：背景图像相对于元素内容固定，当元素随元素滚动时背景图像也会跟着滚动。（CSS3） **使用说明** 要设置背景图是随对象内容滚动还是固定的，必须先指定 background-image 属性。 **代码示例** 设置背景图像对于窗体（视口）是固定的 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-attachment</title> <style> #container{ width: 400px; height: 400px; border: 1px solid #ff6600; background-image: url(../img/01.jpg); background-repeat: no-repeat; background-attachment: fixed; } #set_height{ height: 1500px; width: 30px; border: 10px dotted #336600; } </style> </head> <body> <div id="container"> </div> <div id="set_height"> </div> </body> </html> ```