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;  # 固定背影不滚动