CSS background-attachment 属性

实例

如何设置固定的背景图像

  1. body 
  2.   { 
  3.   background-image: url(bgimage.gif); 
  4.   background-attachment: fixed;
  5.   }

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

所有浏览器都支持 background-attachment 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

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

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

可能的值

值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。

实例

如何设置固定的背景图像

本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body 
  5. {
  6. background-image:url(/i/eg_bg_02.gif);
  7. background-repeat:no-repeat;
  8. background-attachment:fixed
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <p>图像不会随页面的其余部分滚动。</p>
  15. <p>A</p>
  16. <p>B</p>
  17. <p>C</p>
  18. <p>D</p>
  19. <p>E</p>
  20. <p>F</p>
  21. <p>G</p>
  22. <p>H</p>
  23. <p>I</p>
  24. <p>J</p>
  25. <p>K</p>
  26. <p>L</p>
  27. <p>M</p>
  28. <p>N</p>
  29. <p>O</p>
  30. <p>P</p>
  31. <p>Q</p>
  32. <p>R</p>
  33. <p>S</p>
  34. <p>T</p>
  35. <p>W</p>
  36. <p>X</p>
  37. <p>Y</p>
  38. <p>Z</p>
  39. <p>1</p>
  40. <p>2</p>
  41. <p>3</p>
  42. <p>4</p>
  43. <p>5</p>
  44. <p>6</p>
  45. <p>7</p>
  46. <p>8</p>
  47. <p>9</p>
  48. </body>
  50. </html>

相关页面

CSS 教程：CSS 背景

HTML DOM 参考手册：backgroundAttachment 属性