如果我想让背景图在容器内固定，而不是整个页面内固定怎么办

慕粉4184331 2019-08-03

源自：CSS背景和列表 2-15 background

收起

1回答

好帮手慕星星 2019-08-04 16:44:39

同学你好，

背景图本身就是在固定在容器中的，容器大小为多少，背景图就会显示多少，容器滚动的时候，背景图不跟着滚动，例如：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: url(img/7.jpg);
        overflow-y: scroll;
    }
    </style>
</head>
 
<body>
    <div>imooc imooc imooc imooc imooc imooc imooc imooc</div>
</body>
 
</html>

只不过页面滚动的时候，容器滚动了，背景图在容器中当然会滚动。

background-attachment:fixed;是设置图片相对于页面滚动的时候固定住的。也就是容器滚动，背景图不滚动。

自己可以测试理解下，祝学习愉快！

收起回答

提问者慕粉4184331 #1

在老师演示的时候设置了background-position ：top之后就会相对于整个页面固定，我是想在设置了position的情况下它相对于容器固定

2019-08-04 18:15:21
好帮手慕星星回复提问者慕粉4184331 #2

这种是没有办法实现的哦，图片定位默认相对于视口进行的。

2019-08-04 19:17:26