CSS 背景附着

Bertha 。 2022-10-22 09:19 228阅读 0赞

# CSS 背景附着 #

### 文章目录 ###

*  CSS 背景附着

![在这里插入图片描述][20210325174318285.gif]

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

body { 
      background-image: url("tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: fixed;
    }

> 基本代码如上

展示一个例子吧

<!DOCTYPE html>
 <html>
 <head>
 <style> body { background-image: url("/i/photo/tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style>
 </head>
 <body>
 
 <h1>background-attachment 属性</h1>
 
 background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。
 
 提示：如果看不到任何滚动条，请尝试调整浏览器窗口的大小。
 
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 背景图像是固定的。请尝试向下滚动页面。
 
 </body>
 </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]

[20210325174318285.gif]: /images/20221022/f9a4148006a747dc95f487bbc7ca30cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210325174252966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210325174305518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70