如何固定背景不随滚动条滚动？

最新推荐文章于 2022-12-20 18:51:07 发布

cv程序猿

最新推荐文章于 2022-12-20 18:51:07 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/IT2107/article/details/119534579

本文介绍了如何使用CSS使背景图片在页面滚动时保持固定。通过设置`background-attachment: fixed`属性，可以实现背景图片固定，不随内容滚动。同时，还讲解了背景图片的其他属性，如`background-image`、`background-repeat`和`background-position`，帮助理解背景图片的完整控制方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先了解几个背景属性值：

1、背景图片的设置 background-image：url(背景图片的路径及全称)；背景图片的显示原则

1）容器尺寸等于图片尺寸，背景图片正好显示在容器中

2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

网页上有两种图片形式：插入图片、背景图；插入图片：属于网页内容，也就是结构。背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

2、背景图片平铺属性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

no-repeat为不平铺，repeat为默认值，默认平铺，repeat-x为水平平铺，repeat-y为垂直平铺。

3、背景图的位置属性{background-position:left/center/right/数值 top/center/bottom/数值;}

水平方向上的对齐方式（left/center/right）或值垂直方向上的对齐方式(top/center/bottom)或值background-position:值1 值2;两个值：第一个值表示水平位置的值，第二个值：表示垂直的位置。当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置说明：向左方向，向上方向是负值

4、背景图的固定属性{{background-attachment:scroll(滚动)/fixed(固定);}

fixed 固定，不随内容一块滚动；scroll:随内容一块滚动。

下面以360官网背景图片为例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景的固定</title>
    <style>
        
        .box{
            height: 1000px;
            width: 100%;
            /* 引入背景图 */
            background-image: url(../img/banner.jpg);
            /* 让背景图不平铺 */
            background-repeat: no-repeat;
            /* 图片固定，不随滚动条滚动 */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>