应用background-position实现css视差效果

我们知道background-position的取值可以是关键字、像素或百分比等,但不可以将像素或百分比等单位与关键字混合使用,这样可能会导致css失效。尤其要说的一点是,如果应用百分比的话,background-position: 0, 20%; ,这个20%是图片上距离左上角的20%的点,定位到父元素上距离左上角20%的位置。
正是因为这个特性,我们才可以做一些特别的效果。比如说一有一个个网站创造出的有远近效果的背景 。
这个背景是一些树叶,当我们将窗口的大小改变时,我们可以发现叶子的移动速度不同,给人一种有远近的感觉。它的做法给body, .middle .fore分别设置背景图片叶子,并将它们的background-position水平值分别设置为20%,40%和150%,从而达到想要的效果。
以下为关键部分html及css的代码。

        <body>
            <div class="middle">
                <div class="fore">
                    /*其他内容*/
                div>
            div>
        body>
        body{
            background: url(image.png) repeat-x 20% 0;
            background-color: #d3ff99;
        }
        .middle{
            background: url(image.png) repeat-x 40% 0;
            background-color: transparent;
        }
        .fore{
            background: url(image.png) repeat-x 150% 0;
            background-color: transparent;
        }

你可能感兴趣的:(css)