background新增的N個強悍功能！！！

- 關鍵字：red,blue,yellow等具體的顏色單詞；

- 十六進製制： 0-9，a-f，以「#」開頭的6位十六進製制數值表示一種顏色，如#f3e1d2;

- rgb： 分別代表red,green,blue,取值範圍是0-255，如rgb(102,35,210);

-  通過url引入鏈結位址；

- 本地相對路徑位址——url(img/img.jpg)；
- 網路絕對路徑位址——url(附上一張16進製制列表，有興趣的朋友可以點開看下；

- no-repeat 不平鋪；

- repeat-x 沿著x軸水平平鋪；
- repeat-y 沿著y軸垂直平鋪；
- repeat 預設值，x軸、y軸都平鋪；

- 具體數值： （可以是正值也可以是負值）

- x方向(預設是0）
- 正值從左向右移動，負值從右向左移動；
- y方向(預設是0)
- 正值從上向下移動，負值從下向上移動；
- 百分比：
- 圖的百分之n，對齊元素的百分之n；
- 關鍵字：
- x方向(預設left)
- left（圖的左側和元素左側對齊）
- center （圖的中間和中間左側對齊） 
- right （圖的右側和中間右側對齊）
- y方向(預設top)
- top （圖的頂部和元素頂部對齊）
- center （圖的中間和中間左側對齊）
- bottom （圖的底部和元素底部對齊）

- 相關屬性值

- scroll 預設值，背景圖隨之滾動條移動；
- fixed 背景圖固定，不隨滾動條移動；此時座標根據整個可視區計算；

padding-box

content-box

-webkit-text 只有文字區域顯示元素背景；

[ ]舉例

#box

padding-box

content-box

[ ] 舉例

#box

值的型別：

關鍵字：

contain 包含

auto 自動

[ ] 舉例

#box

#box

漸變方向設定

[ ] 舉例

#box

repeating-linear-gradient 重複線性漸變

[ ] 舉例

#box

[ ] 舉例

#box

形狀設定 ellipse||circle

圓心點設定

[ ] 舉例

#box

#box

background新增屬性

今天解除了幾個曾經沒有用到的屬性，所以想總結並且複習一下。background origin屬性 有三個屬性值，分別是border box，padding box，content box。看到border box是不是聯想到了css3中的盒子模型。box sizing border box。它是為了...

CSS3 background新增屬性用法

1.background屬性列表 background color background position background size background repeat background origin background clip background attachment backgr...

background少見的屬性

css3 背景 background clip 規定背景的繪製區域。background origin 規定背景的定位區域。background size 規定背景的尺寸。css3 漸變 css3 定義了兩種型別的漸變 gradients 線性漸變 linear gradients 向下 向上 向左...