CSS 属性

CSS 提供的background-attachment 属性决定背景上图像的位置是在视口内固定，还是在其容器内滚动。

属性值

  • fixed:

    • 背景图像相对于视口是固定的。

    • 甚至使用滚动机制，背景保持固定。

  • local:

    • 背景图像相对于元素的内容是固定的。

    • 如果有滚动机制，背景会随着内容一起滚动。

  • scroll:

    • 默认值。

    • 背景图像随主视图滚动，但在本地视图内保持固定。

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroundAttachment = scroll | fixed | local;

CSS background-attachment : fixed值

以下示例演示了background-attachment :fixed属性固定相对于视口的背景图像 -

<html>
<head>
<style>  
   .fixed {
      background-image: url('/css/images/logo.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: left top;
      background-color: lightblue;
      background-size: 40% 30%;
      padding:5rem;
      width: 800px;
      height: 500px;
   }
</style>
</head>
<body>
   <div class="fixed">
   <h2>background-attachment: fixed</h2>
   <p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success. Ipsum.</p>
   </div>
</body>
</html>

CSS background-attachment : scroll值

以下示例演示了background-attachment:scroll属性随内容滚动背景图像−

<html>
<head>
<style>  
   .scroll {
      background-image: url('/css/images/logo.png');
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: left top;
      background-color: lightblue;
      background-size: 40% 30%;
      padding:5rem;
      width: 800px;
      height: 500px;
   }
</style>
</head>
<body>
   <div class="scroll">
   <h2>background-attachment: scroll</h2>
   <p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success. Ipsum.</p>
   </div>
</body>
</html>

CSS background-attachment : local值

以下示例演示background-attachment:local属性固定相对于元素内容的背景图像 −

<html>
<head>
<style>  
   .local {
      background-image: url('/css/images/logo.png');
      background-repeat: no-repeat;
      background-attachment: local;
      background-position: left top;
      background-color: lightblue;
      background-size: 40% 30%;
      padding:5rem;
      width: 800px;
      height: 500px;
   }
</style>
</head>
<body>
   <div class="local">
   <h2>background-attachment : local</h2>
   <p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success. Ipsum.</p>
   </div>
</body>
</html>