背景二 

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

如果想要调整背景图片位置

　　通过background-position属性可以调整背景图片在元素中的位置

　　　　可选值：

　　　　　　　可使用top right bottom left中的两个值来制定一个背景图片位置

　　　　　　　top left 左上

　　　　如果只给出一个值，则第二个值默认为center

 

　　　　也可以直接指定两个偏移量

　　　　　　第一个值是水平偏移量

　　　　　　　　指定正值，图片向右移动指定元素，反之负值向左

　　　　　　第二个值是垂直偏移量

　　　　　　　　同上指正向下移动指定元素，反之负值向上

 

background-attachment用来设置背景图片是否跟随页面一起滚动

　　　可选值：

　　　　　　scroll 默认值 背景图片随窗口滚动

　　　　　　fixed 背景图片固定在某一位置，不随页面滚动，当背景图片设置为fixed时，背景图片的定位永远相对

　　　　　　　　于浏览器的窗口

　　　不随窗口滚动的图片，一般设置给body而不设置给其他元素

posted @ 2021-07-06 15:59  2237774566  阅读(33)  评论(0)    收藏  举报