CSS 基础学习-041 使用background-attachment属性设置背图像滚动或固定

由 hrs, 26 八月, 2021

background-attachment 属性指定背景图像是滚动还是固定。

fixed:设置固定的。

srcoll:设置滚动的。

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS背景附着实例</title>
    <style>
      body{
        background-image:url(img/tree.png);
        background-repeat:no-repeat;
        background-position:right top;
        margin-right:200px;
        background-attachment:fixed;
      }
    </style>
  </head>

  <body>
    <h1>css背景滚动</h1>
    <p>background-attachment 属性指定背景图像是滚动还是固定。</p>
    <p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</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>背景图像是固定的，请尝试向下滚动页面。</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>背景图像是固定的，请尝试向下滚动页面。</p>
   <p>背景图像是固定的，请尝试向下滚动页面。</p>
    <p>背景图像是固定的，请尝试向下滚动页面。</p>
  </body>

</html>

运行效果：

css-041.png

提示：如果你想把背景图像跟页面一起滚动，可以把background-attachment 属性的值设置为scroll就可以了。

标签

评论