CSS background-attachment 属性

如何指定一个固定的背景图像：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      background-image: url("/examples/smiley.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
  </style>
</head>

<body>
  <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>

尝试一下 »

标签定义及使用说明

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

默认值: scroll
继承: no
版本: CSS1
JavaScript 语法: object object.style.backgroundAttachment="fixed"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background-attachment 1.0 4.0 1.0 1.0 3.5
注意： Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素.

属性值

值 说明
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承

相关文章

CSS 教程: CSS Background