全站搜索 客戶案例 新聞中心 未分類

                CSS背景樣式:background屬性

                技術服務 網頁設計 css9750

                背景樣式主要包括背景顏色和背景圖像。

                CSS背景樣式:background屬性

                1.background-color 設置元素的背景顏色。
                background-color:顏色/transparent
                說明:transparent是全透明
                顏色值(顏色名/RGB/十六進制)
                背景區包括內容、內邊距(padding)和邊框(border)、不包含外邊距(margin)

                2.background-image 設置元素的背景圖片。
                background-image:url(圖片地址)/none
                說明:url地址可以是相對地址也可以是絕對地址
                元素的背景占據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距
                默認地,背景圖像位于元素的左上角,并在水平和垂直方向上重復。
                當即設置了背景圖片又設置了背景顏色時,背景圖片會覆蓋背景顏色

                3.background-position 設置背景圖片的起始位置

                A. 這個屬性只能應用于塊元素和替換元素,替換元素包括img、input、textarea、select和object。
                B. 該屬性值可以設置為關鍵字,也可以設置為兩個像素值(”20px 30px“),設置為關鍵字時表示背景圖像相對于元素的左上角的距離(分別是水平距離和垂直距離)。
                C. 該屬性值可取的關鍵字為:
                top left:左上(表示圖像位于元素的左上角,下面的類似)
                top center:靠上居中
                top right:右上
                left center:靠左居中
                center center:正中
                right center:靠右居中
                bottom left:左下
                bottom center:靠下居中
                bottom right:右下

                4.background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
                background-attachment:scroll/fixed
                scroll: 默認值,隨著圖片的滾動而滾動
                fixed:當頁面的其余部分滾動時,背景圖片不會移動

                5.background-repeat 設置背景圖像是否重復及如何重復
                該屬性可以取如下值:
                ??????? no-repeat:不平鋪
                ??????? repeat:在水平方向(x軸)和垂直方向(y軸)同時平鋪,默認值
                ??????? repeat-x:在水平方向(x軸)平鋪
                ??????? repeat-y:在垂直方向(y軸)平鋪

                6.background 簡寫屬性,作用是將背景屬性設置在一個聲明中。
                background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
                說明:各值之間用空格分割,不分先后順序

                示例代碼

                <html>
                <head lang="en">
                    <meta charset="UTF-8">
                    <title>背景屬性</title>
                    <style>
                        body{
                            height: 1000px;
                            /*背景顏色   默認為透明  transparent*/
                            background-color: red;
                            /*background-color: #ff0000;*/
                            /*background-color: rgb(255,0,0);*/
                            /*background-color: rgba(255,0,0,.5);*/
                            
                            /*背景圖片 默認水平垂直平鋪*/
                            /*background-image: url("images/pic2.jpeg");*/
                
                            /*背景圖片平鋪*/
                            /*background-repeat: no-repeat;*/
                            /*background-repeat: repeat-x;*/
                            /*background-repeat: repeat-y;*/
                
                            /*背景圖片的大小*/
                            /*background-size:1000px ;*/
                            /*background-size: 100% 100%;*/
                
                            /*背景圖片固定*/
                            /*background-attachment:fixed ;*/
                
                            background:red  url("images/pic2.jpeg") no-repeat fixed ;
                            background-size: 100% 100%;
                        }
                        .box{
                            width: 800px;
                            height: 600px;
                            /*background-color: rgba(255,255,255,.5);
                            background-image: url("images/pic1.jpg");
                            background-repeat: no-repeat;*/
                            /*background-size: contain;*/
                
                            background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;
                
                
                            /*背景圖片定位*/
                            /*background-position: x y;*/
                            /*當只有水平方向,垂直方向默認居中*/
                            /*background-position: 30px 30px;*/
                            /*background-position: 30px;*/
                            /*background-position: right bottom;*/
                            /*background-position: center;*/
                
                
                            /*簡寫為*/
                            /*background:顏色 圖片 平鋪 大小  定位 固定;*/
                        }
                    </style>
                </head>
                <body>
                    <div class="box"></div>
                </body>
                </html>
                


                上一篇: 下一篇:

                相關推薦

                您好!請登錄

                點擊取消回復
                  展開更多
                  0

                  客官請稍后,玩命加載中!

                  国产精品剧情av一区二区三区,日韩亚洲国产中文永久,狠狠综合久久久久综合网,9久热这里只有精品国产