Style backgroundAttachment 属性

Style 对象参考手册 Style 对象

定义和用法

backgroundAttachment 属性设置或返回背景图像是否固定或者随着页面的其余部分滚动。

语法

设置 backgroundAttachment 属性：

Object.style.backgroundAttachment = "scroll|fixed|local"

返回 backgroundAttachment 属性：

Object.style.backgroundAttachment

值 描述
scroll 背景随着元素一起滚动。这是默认。
fixed 背景保持固定。
local 背景随着元素的内容一起滚动。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要浏览器都支持 backgroundAttachment 属性。

实例

设置背景图像为固定（不滚动）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style type="text/css">
    body {
      background: #f3f3f3 url("/examples/img_tree.png") no-repeat right top;
    }
  </style>
  <script>
    function displayResult() {
      document.body.style.backgroundAttachment = "fixed";
    }
  </script>
</head>
<body>

  <button type="button" onclick="displayResult()">将背景图像设置为固定的</button>
  <br>
  <h1>Hello World!</h1>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>

</body>
</html>

尝试一下 »

更多实例

滚动和固定之间切换 - 滚动和固定的 backgroundAttachment 之间的切换。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    body {
      background: #f3f3f3 url("/examples/img_tree.png") no-repeat fixed right top;
    }
  </style>
  <script>
    function bgAttachment() {
      var x = document.body.style.backgroundAttachment;
      document.getElementById("toggle").innerHTML = (x == "scroll") ? "设置背景图像滚动!" : "设置背景图像固定";
      document.body.style.backgroundAttachment = (x == "scroll") ? "fixed" : "scroll";
    }
  </script>
</head>

<body>
  <button id="toggle" onclick="bgAttachment();">设置背景图像滚动</button>
  <p>滚动页面并且观察背景图像。</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <p>这是一个段落</p>

</body>
</html>

尝试一下 »

Style 对象参考手册 Style 对象