CSS背景

CSS中的背景，相似於Adobe PS中的圖層概念。背景爲元素添加背景顏色和背景圖片提供了支持，實際上每一個HTML元素由前景層和背景層組成

前景層包括內容和邊框，背景層包括背景色和背景圖

HTML盒模型的三維透視圖以下

 

每一個HTML盒子，都有如下的CSS屬性

• background-color
• background-image
• background-repeat
• background-position
• background-size
• background-attachment
• background（簡寫屬性）
• background-clip、background-origin、background-break

能夠用這些屬性來控制HTML盒子的背景細節

background-color

用來設置盒子的背景色

body{background-color: darkcyan;}

上面的代碼，能夠將整個頁面設置爲darkcyan色

background-image

設置元素的背景圖片

 p{background-image: url("dist/img/star.ico")}

上面講p元素的背景設置了一張圖片，默認狀況下，圖片會從盒子的左上角，沿水平和垂直方向重複出現，最終將填滿整個背景區域

background-repeat

控制背景重方式

它有六個值，默認值是repeat即在水平和垂直方向上都重複，另外三個值repeat-y(沿y方向重複)，repeat-x(沿x方向重複)，no-repeat(不重複)。示例

body{background-image: url("dist/img/star.ico");background-repeat: repeat-y}

爲盒子添加背景圖，並設置圖片只在y方向上重複

另外兩個值是round和space，

round調節圖片大小適應背景，確保圖片不被剪裁

space添加空白適應背景，確保圖片不被剪裁

background-position

更改背景出現的位置

 background-position有五個值，任何兩個值組合起來，能夠控制元素背景的位置