CSS background-attachment 属性 详解
css3基础 2022-07-14 15:52:10小码哥的IT人生shichen
CSS background-attachment 属性
定义和用法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
另请参阅：
CSS 教程：CSS 背景
HTML DOM 参考手册：backgroundAttachment 属性
实例
如何设置固定的背景图像：
body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}
完整实例【亲自试一试】：
<html>
<head>
<style type="text/css">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>图像不会随页面的其余部分滚动。</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
<p>L</p>
<p>M</p>
<p>N</p>
<p>O</p>
<p>P</p>
<p>Q</p>
<p>R</p>
<p>S</p>
<p>T</p>
<p>W</p>
<p>X</p>
<p>Y</p>
<p>Z</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
background-attachment: scroll|fixed|local|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
技术细节
| 默认值： | scroll |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.backgroundAttachment="fixed" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
