6.1.2.11 背景

1.   背景顏色

backgroud-color: 單詞  或 rgb(255,0,0)  或 十六進制 #ff0000  

#ff(red)00(green)00(blue) 

若是六位的紅黃藍各自都同樣的話，能夠簡化成三位的。

如：#ff0000 等價於#f00

#112233 等價於#123

#121212 不能用三位表示。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

colors 插件  拾色器

 rgba(0,0,0,0.8)  a是透明色

 

2. 背景圖片

background-img: url(./bojie.jpg);  默認會平鋪，顯示N多張

backgroud-repeat: repeat;

backgroud-repeat: no-repeat;

backgroud-repeat: repeat-x; 水平方向平鋪

backgroud-repeat: repeat-y; 垂直方向平鋪

padding:100px;  padding的區域也被平鋪掉。

 

3. 背景定位

backgroud-position:  100px  100px （+向右移100px   +垂直方向向下移100px）    

 快捷鍵 bgp<tab>       -100px  -100px (-向左移100px    -向上移100px)

 

   應用： CSS精靈圖（雪碧圖）

             把小圖標都合併在同一張圖片上，減小服務器請求次數

 backgroud-position：photoshop中X -Y的位置  

 

# 水平方向：left center right

　垂直方向：top center bottom

 backgroud-position:  center center;   水平  垂直

 

  #水平居中通天banner圖： 圖片大於盒子的大小

   backgroud-position:  center top; 

 

backgroud: red url('./images/banner.jpg') no-repeat center top;

# 前面三個位置能夠作任意調，但center top 必定要挨着寫。

 

4. backgroud-attachment 

backgroud: url('') no-repeat 0 0 ;

backupgroud-attachment: fixed;  # 固定背影不滾動