如何让背景图片固定不随滚动条滚动

最新推荐文章于 2024-08-04 14:28:38 发布

那年1998

最新推荐文章于 2024-08-04 14:28:38 发布

阅读量7.6k

点赞数 6

分类专栏：静态页面文章标签：页面样式 html5

本文链接：https://blog.csdn.net/qq_38857381/article/details/89961057

版权

静态页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用属性 background-attachment: fixed;

属性设置背景图像是否固定或者随着页面的其余部分滚动。

三个参数：

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

下面是样式，复制运行看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定背景图图像</title>
    <style>
        body {
            height: 1800px;
        }
        .outer {
            background: url('./image/topbg.jpg') no-repeat center center;
            background-size: cover;
            width: 100%;
            height: 400px;
            /* 只需要给背景图加上该属性即可 */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="outer"> </div>
</body>
</html>

那年1998

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
如何让背景图片固定不随滚动条滚动

使用属性 background-attachment: fixed;属性设置背景图像是否固定或者随着页面的其余部分滚动。三个参数：scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。下面是样式...
复制链接

扫一扫

专栏目录