css15.背景設置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                width: 1000px;
                height: 6000px;
                background-color: pink;
                margin: 0 auto;
                /* 
                    使用border-image設置背景圖片
                        默認從左上角顯示,圖片太小平鋪
                */
                background-image: url("2.png");
                /* 
                    background-repeat指定圖片重複樣式
                    可選值:   
                        repeat 默認值,雙向和重複
                        no-repeat 不重複
                        repeat-x 水平重複
                        repeat-z 垂直重複

                 */
                 background-repeat: no-repeat;
                 /* 
                    背景圖片默認在左上角顯示
                    通過background-position可以調整背景圖片在元素中位置
                    可選值:
                        top bottom left right center中的兩個
                         top left
                         bottom right
                         水平方向一個值,垂直方向一個值
                         如果只給出一個值,第二個值默認center
                    也可以指定兩個偏移量 水平 垂直

                  */
                /* background-position: bottom right; */
                background-position: 1000px 50px;
                /* 
                    background-attachment用來設置背景圖片是否隨頁面一起滾動
                    可選值:
                        scroll 默認值,背景圖片隨窗口滾動
                        fixed 背景圖片固定在某一位置
                    不隨窗口滾動的圖片,一般設置給body
                 */
                background-attachment: fixed;
            }

        
        </style>


    </head>
        
    <body>
        <div class="box1"></div>


    </body>


</html>
發佈了36 篇原創文章 · 獲贊 1 · 訪問量 435
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章