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

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

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师