背景的偏移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            *{
                margin: 0;
                padding: 0;
            }
            
            .box1{
                height: 500px;
                margin:  0 auto;
                
                /*
                 * 设置一个背景颜色
                 */
                background-color: #bfa;
                /*
                 * 设置一个背景图片
                 */
                background-image: url(img/4.png);
                /*
                 * 设置一个图片不重复
                 */
                background-repeat: no-repeat;
                /*
                 * 背景图片默认是贴着元素的左上角显示
                 * 通过background-position可以调整背景图片在元素中的位置
                 * 可选值：
                 *      该属性可以使用 top right left bottom center中的两个值
                 *          来指定一个背景图片的位置
                 *          top left 左上
                 *          bottom right 右下
                 *          如果只给出一个值，则第二个值默认是center
                 * 
                 *      也可以直接指定两个偏移量，
                 *          第一个值是水平偏移量
                 *              - 如果指定的是一个正值，则图片会向右移动指定的像素
                 *              - 如果指定的是一个负值，则图片会向左移动指定的像素
                 *          第二个是垂直偏移量   
                 *              - 如果指定的是一个正值，则图片会向下移动指定的像素
                 *              - 如果指定的是一个负值，则图片会向上移动指定的像素
                 *      
                 */
                /*background-position: -80px -40px;*/
                background-attachment: fixed;
            }
            
            body{
                background-image: url(img/3.png);
                background-repeat: no-repeat;
                
                /*
                 * background-attachment用来设置背景图片是否随页面一起滚动
                 *      可选值：
                 *          scroll，默认值，背景图片随着窗口滚动
                 *          fixed，背景图片会固定在某一位置，不随页面滚动
                 * 
                 * 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
                 */
                background-attachment:fixed ;
            }
            
            
        </style>
    </head>
    <body style="height: 5000px;">
        
        <div class="box1"></div>
        
    </body>
</html>
背景的偏移

推荐阅读更多精彩内容
