background-attachment

在CSS中background-attachment属性指定相对视口如何移动背景。

有三个值：scroll、fixed和local。解释它们区别最好的方式就是通过演示(尝试滚动单个背景)：

    <h2><code>scroll (default)</code></h2>
    <div class="scroll">
        <div class="expand"></div>
    </div>

    <h2><code>fixed</code></h2>
    <div class="fixed">
        <div class="expand"></div>
    </div>

    <h2><code>local</code></h2>
    <div class="local">
        <div class="expand"></div>
    </div>

    <br class="extra-space">

　　

        h2 {
            text-align: center;
            margin-top: 48px;
        }

        div {
            height: 200px;
            width: 50%;
            max-width: 600px;
            margin: 32px auto;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .scroll {
            background: url('./images/dog.jpg');
            background-attachment: scroll;
         
        }

        .fixed {
            background: url('./images/dog.jpg');
            background-attachment: fixed;  
            /* background-repeat:no-repeat;   */    
        }

        .local {
            background: url('./images/dog.jpg');
            background-attachment: local;
            
        }

        .expand {
            height: 400px;
            width: 100%;
        }

        .extra-space {
            margin-bottom: 50px;
        }

当谈及background-attachment时需要考虑两种不同的观点：主视图(浏览器窗口)和局域视图(你可以在上面的演示中看到这点)。

scroll是默认值。它与主视图一起滚动，但在局域视图中保持固定。

fixed在无论什么情况下都保持固定。它有点像物理窗子：在窗口周围移动会改变你的视角，但它不会改变窗户外的东西。

local是创造性的，因为默认值scroll表现就像一个固定背景。它可以使主视图和局域视图都能滚动。你可以用它做一些非常酷的事情。

思考：为什么background-attachment:fixed;会导致背景图片出现偏移现象? background-attachment:fixed; 背景图片的位置是相对于页面可视区左上角的(相当于浏览器窗口左上角)，即使滚动，仍然相对于浏览器窗口左上角为基准;而外层的div 只是他能显示的区域，也就是能看到的区域;而div之外的部分就看不到了,此时外层的div相当于一个窗口.从视觉上看，就像窗口中的图片出现了偏移现象。