W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <body style="background: #f3f3f3 url('/i/pic/tree.png') no-repeat fixed right top;"> <h1>HTML Style 对象</h1> <h2>backgroundAttachment 属性</h2> <p><b>提示：</b>如果滚动条不可用，请尝试调整窗口大小。</p> <p>单击该按钮可在滚动和固定位置之间切换。</p> <p><b>提示：</b>请在单击按钮之前和之后滚动页面。</p> <button id="toggle" onclick="myFunction();">将图像设置为滚动</button> <p> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> 一些启用滚动的文本。 <br><br><br><br> </p> <script> function myFunction() { let x = document.body.style.backgroundAttachment; document.getElementById("toggle").innerHTML=(x=="scroll")? "将背景图像设置为滚动！":"将背景图像设置为固定！"; document.body.style.backgroundAttachment=(x=="scroll")? "fixed":"scroll"; } </script> </body> </html>