背景樣式
內容層和背景層
背景層：背景圖片是背景顏色的前景圖（背景圖片在北背景顏色上面）；
背景顏色：background-color：；初始值爲transnent
背景圖片：background-image：url(路徑或鏈接)；初始值爲none
rbga()和opaciy的區別：rbga是設置標籤出內容以外的透明度；opacity是將整個標籤設置爲透明；
給盒子設置邊框後背景顏色和背景圖片都會延伸到邊框下面（其本質是系統自動從圖片上截取一部分拼接到border下面）。
常用的背景圖片：
.jpg 不支持動畫，不支持透明，漸進顯示，顏色豐富，有損
.png 不支持動畫，支持透明度，顏色豐富，無損
.gif 支持動畫，256種顏色，2種透明度，漸進顯示
.webp 支持動畫，高壓縮率，高加載速率
背景層級
背景平鋪：
background-repeat:repeat(默認)/no-repeat；
當內容區大於背景圖片時，會產生平鋪效果。
background-repeat:reapeat-x;在x方向展開平鋪。
background-repeat:repeat-y:在y方向展開平鋪。
背景圖片的大小：
background-size:200px 200px;
cover；(圖片等比縮放，直到鋪滿整個背景區域，邊框會被背景圖片所覆蓋)
contain；(圖片等比縮放，直到有一條邊觸碰到邊框)
200px auto(這時的高根據圖片的寬等比例縮放)
auto 200px(這裏的寬是根據圖片的高等比例縮放)
100% 100% 按照內容區的百分比縮放
背景圖片的顯示基點：
background-origin:規定了在圖片不平鋪的情況下，背景圖片左上角頂點的初始位置
默認爲padding-box:背景圖片從內邊距左上角開始
content-box:背景圖片內容區從內邊距的左上角開始
border-box:背景圖片相當於從邊框的左上角開始
背景圖片裁剪：
背景圖片從開始裁剪background-clip:
content-box:只顯示內容區的部分，其餘部分被裁剪；
padding-box:顯示內邊距和內容區的部分，其餘部分被裁剪；
border-box:顯示內容區，內邊距，和邊框的部分圖片；
背景圖片關聯依附：(正常情況下背景圖片是依附於盒子的，會隨着盒子的變化而變化）
背景圖片的固定background-attachment:fixed;前提是不平鋪。(改樣式的作用是決定背景是在視口中固定還是隨包含它的區塊元素一起滾動)
fixed:此關鍵詞表示背景相當於視口的固定，即使一個元素擁有滾動機制，背景也不會隨着元素的的內容滾動。
local:背景圖片依附在元素上，隨着內容的滾動進行滾動；
scroll：此關鍵詞表示背景相對於元素本身固定，而不是隨着內容滾動；（默認情況）
自定義背景圖片的定位（分爲相對於瀏覽器的定位和元素的定位）：
background-position: 100px(x軸) 100px（y軸）;(50% 50%居中定位)
背景的複合屬性：background:color image repeat attachment position/size;
eg:background:red url() no-repeat fixed 150px 50px/50px 50px;
要按順序寫，省略的部分會被默認值替代。 position和size之間要用/分割。
單個元素設置兩個的背景的複合寫法：
除了顏色都按上面的順序寫，兩個背景之間要加逗號，顏色放置到最後（前面得加一個逗號）
on和size之間要用/分割。
單個元素設置兩個的背景的複合寫法：
除了顏色都按上面的順序寫，兩個背景之間要加逗號，顏色放置到最後（前面得加一個逗號）