WEB前端第九課——div背景

1.div+css佈局

　　<div>特徵

　　① 能夠定義文檔中的分區或節（division/section）

　　② 能夠把文檔分割爲獨立的、不一樣的部分，能夠用做嚴格的組織工具

　　③ 是一個塊級元素，它的內容會自動開始一個新行

　　④ 通常經過 id 或 class 標記與CSS配合使用

　　經常使用到的CSS屬性：

　　width:數值、height:數值、background-color:顏色、float-left（是div不佔據一行）

2.background-color背景顏色

　　默認值是transparent（透明的）

　　當同時定義了背景圖像和背景顏色時，背景圖像將覆蓋背景顏色之上

　　顏色取值方式：

　　　　① 關鍵字，如red、blue等

　　　　② 16進制，如#000000、#cccccc、#ff0000等

　　　　③ rgb（0,0,0）

　　　　④ rgba（0,0,0, .n），n爲0~1，透明度

3.background-image背景圖片

　　默認值是none（沒有圖片）

　　元素背景佔據了元素的所有尺寸，包括內邊距和邊框，但不包括外邊距

　　經過url使用絕對或相對路徑指定圖片，background-image:url("");

4.background-repeat背景圖片是否重複

　　經常使用屬性：

　　repeat，默認值，background-image默認水平方向和垂直方向平鋪顯示

　　repeat-x，背景圖片將在水平方向重複

　　repeat-y，背景圖片將在垂直方向重複

　　no-repeat，背景圖片將僅顯示一次

　　語法示例

body{
        background-image: url("");
        background-repeat: no-repeat;
        }

5.background-size背景圖片尺寸

　　length，設置背景圖片的寬度和高度，第一個值設置寬度，第二個值設置高度，若是隻設置一個值，則第二個值會被設置爲「auto」

　　percentage，以父元素的百分比來設置圖片的寬度和高度，後文同上

　　cover，把背景圖片擴展至足夠大，以是背景圖片徹底覆蓋背景區域，背景圖片某些部分也許沒法徹底顯示在背景區域中

　　contain， 把圖片擴展至最大尺寸，以使其寬度和高度徹底適應內容區域，背景區域某些部分可能沒法徹底覆蓋

6.background-position背景圖片位置

　　position是相對於外部容器而言，非整個頁面

　　屬性值書寫方式：

　　① 使用方位關鍵詞定義，第一個值定義水平方向（left、center、right），第二個值定義垂直方向（top、center、bottom）

　　② 使用百分比定義，第一個值定義水平方向，第二個值定義垂直方向，左上角是「0% 0%」，右下角是「100% 100%」

　　③ 使用具體數字定義，第一個值定義水平方向，第二個值定義垂直方向，左上角是「0px 0px」

　　屬性特色：

　　① position的默認值爲區域的左上角，即0點座標

　　② 以上三種方式，若是僅定義了一個值，則另外一個值爲居中（center或50%）

　　③ 以上三種方式能夠混合搭配使用

7.background-attachment背景圖片是否隨內容滾動

　　屬性值：

　　① scroll，默認值，隨頁面其他部分的滾動而移動

　　② fixed，頁面滾動時，背景圖片不動

body{
     background-image: url("");
     background-attachment: scroll;
     }

8.background簡寫

　　background 簡寫屬性能夠在一個聲明中設置全部的背景屬性。

　　能夠設置屬性以下：

　　background-color

　　background-image

　　background-repeat

　　background-attachment

　　background-position

　　background-size

　　若是不設置其中某個值，也不會出問題，自動取默認值

　　在書寫屬性值時，沒有嚴格順序要求，建議按照上文列表順序依次設置