参考手册
CSS 背景
CSS 背景重复
CSS 背景简写
返回 CSS 背景

CSS 背景附着

CSS background-attachment

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

指定应该固定背景图像：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-image: url("/images/demo.png");
  7.   background-repeat: no-repeat;
  8.   background-position: right top;
  9.   margin-right: 200px;
  10.   background-attachment: fixed;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <h1>background-attachment 属性</h1>
  18. <p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
  20. <p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
  22. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  23. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  24. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  25. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  26. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  27. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  28. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  29. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  30. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  31. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  32. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  33. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  34. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  35. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  36. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  37. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  38. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  39. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  40. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  41. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  42. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  43. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  44. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  45. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  46. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  47. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  48. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  49. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  50. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  51. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  52. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  53. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  54. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  55. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  56. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  57. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  58. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  59. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  60. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  61. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  62. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  63. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  64. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  65. <p>背景图像是固定的。请尝试向下滚动页面。</p>
  67. </body>
  68. </html>
运行一下

指定背景图像应随页面的其余部分一起滚动：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-image: url("/images/demo.png");
  7.   background-repeat: no-repeat;
  8.   background-position: right top;
  9.   margin-right: 200px;
  10.   background-attachment: scroll;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <h1>background-attachment 属性</h1>
  18. <p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
  20. <p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
  22. <p>背景图像滚动。请尝试向下滚动页面。</p>
  23. <p>背景图像滚动。请尝试向下滚动页面。</p>
  24. <p>背景图像滚动。请尝试向下滚动页面。</p>
  25. <p>背景图像滚动。请尝试向下滚动页面。</p>
  26. <p>背景图像滚动。请尝试向下滚动页面。</p>
  27. <p>背景图像滚动。请尝试向下滚动页面。</p>
  28. <p>背景图像滚动。请尝试向下滚动页面。</p>
  29. <p>背景图像滚动。请尝试向下滚动页面。</p>
  30. <p>背景图像滚动。请尝试向下滚动页面。</p>
  31. <p>背景图像滚动。请尝试向下滚动页面。</p>
  32. <p>背景图像滚动。请尝试向下滚动页面。</p>
  33. <p>背景图像滚动。请尝试向下滚动页面。</p>
  34. <p>背景图像滚动。请尝试向下滚动页面。</p>
  35. <p>背景图像滚动。请尝试向下滚动页面。</p>
  36. <p>背景图像滚动。请尝试向下滚动页面。</p>
  37. <p>背景图像滚动。请尝试向下滚动页面。</p>
  38. <p>背景图像滚动。请尝试向下滚动页面。</p>
  39. <p>背景图像滚动。请尝试向下滚动页面。</p>
  40. <p>背景图像滚动。请尝试向下滚动页面。</p>
  41. <p>背景图像滚动。请尝试向下滚动页面。</p>
  42. <p>背景图像滚动。请尝试向下滚动页面。</p>
  43. <p>背景图像滚动。请尝试向下滚动页面。</p>
  44. <p>背景图像滚动。请尝试向下滚动页面。</p>
  45. <p>背景图像滚动。请尝试向下滚动页面。</p>
  46. <p>背景图像滚动。请尝试向下滚动页面。</p>
  47. <p>背景图像滚动。请尝试向下滚动页面。</p>
  48. <p>背景图像滚动。请尝试向下滚动页面。</p>
  49. <p>背景图像滚动。请尝试向下滚动页面。</p>
  50. <p>背景图像滚动。请尝试向下滚动页面。</p>
  51. <p>背景图像滚动。请尝试向下滚动页面。</p>
  52. <p>背景图像滚动。请尝试向下滚动页面。</p>
  53. <p>背景图像滚动。请尝试向下滚动页面。</p>
  54. <p>背景图像滚动。请尝试向下滚动页面。</p>
  55. <p>背景图像滚动。请尝试向下滚动页面。</p>
  56. <p>背景图像滚动。请尝试向下滚动页面。</p>
  57. <p>背景图像滚动。请尝试向下滚动页面。</p>
  58. <p>背景图像滚动。请尝试向下滚动页面。</p>
  59. <p>背景图像滚动。请尝试向下滚动页面。</p>
  60. <p>背景图像滚动。请尝试向下滚动页面。</p>
  61. <p>背景图像滚动。请尝试向下滚动页面。</p>
  62. <p>背景图像滚动。请尝试向下滚动页面。</p>
  63. <p>背景图像滚动。请尝试向下滚动页面。</p>
  65. </body>
  66. </html>
运行一下
CSS 背景重复
CSS 背景简写

分类导航