W3School TIY 亲自试一试！

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background-image: url("/i/photo/tree.png");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
 background-attachment: scroll;
}
</style>
</head>
<body>

<h1>background-attachment 属性</h1>

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。

提示：如果看不到任何滚动条，请尝试调整浏览器窗口的大小。

背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。
背景图像滚动。请尝试向下滚动页面。

</body>
</html>

W3School TIY Editor