background-attachment属性解析 fixed,local,scroll

乖乖的,background-attachment这几个属性相信一些刚学的同学会很纠结吧

    <style>
        div{
            width:400px;
            height: 300px;
            overflow:scroll;
            background-image:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590057680177&di=5e667e1a9d0a747cfe54d494e2b4c68d&imgtype=0&src=http%3A%2F%2Fb2-q.mafengwo.net%2Fs5%2FM00%2F91%2F06%2FwKgB3FH_RVuATULaAAH7UzpKp6043.jpeg");
            background-repeat:no-repeat;
            background-size:400px auto;
            background-attachment: scroll;
        }
        p{
            line-height:1000px;
        }
   

    <div>
        <p>内容显示</p>    
    </div>
    <p>body内容显示</p>
    

先说说这个代码,因为主要还是刚学的时候会纠结这个.
给div这个块弄了个overflow:scroll, 给他加了个滚动条.并且外面设置了个p标签这样body也会出现个滚动条,(图文并茂更好了解:)

background-attachment:fixed;

当我们滚动body的滚动条(最右边)的时候,会发现在div窗口够大的情况下,背景图片被往下挤了(相对于可视窗口的位置是不变的),但是如果超出div的窗口边框的部分会被隐藏(可以和上面那个图作对比,div空白部分被挤没了) :

但是当我们滚动div的滚动条的时候,会发现背景图片一动不动:

因此,可以说是 fixed 是相对于可是窗口的固定位置

background-attachment:local;

那么local又是什么样子的?????
如果我们滚动div的滚动条的话,会发现背景图片向上移动了:

当然移动body的滚动条的时候效果也是一样的:

background-attachment:scroll;

当我们滑动div的滚轮的时候,背景图片的位置不会发生改变

但是,当我们滑动body的滚动条的时候, 并不会像fixed那样把背景图片往下面挤, 而是会像local一样, 图片相对窗口上移,直到消失: