CSS查漏补缺（三）-背景属性

最近在图书馆借了一本CSS方面的书想巩固下CSS基础，书名是《CSS设计指南》,看完感觉是一本还错的CSS基础书籍，然后我便把自己CSS方面还比较薄弱的地方写到了笔记里，以后自己还可以复习下，嘻嘻~

background-repeat 设置背景重复

`no-repeat repeat-x repeat-y`
  注：CSS3提供了两个新属性（仅Chrome,Safari,Opera支持）
   `round`：为确保图片不被剪切，通过调整图片大小来适应背景区域
   `space`：为确保图片不被剪切，通过在图片间添加空白来适应背景区域

background-position 设置背景位置

该属性有5个关键字值：`top left bottom right center`

background-size设置背景尺寸

百分值：`50%`缩放图片，填充背景区的一半
像素值：`100px 50px `设置图片宽100px,高50px
`cover`：拉大图片，使其完全填满背景区，**保持宽高比   **    
`contain`：缩放图片，使其恰好适合背景区，**保持宽高比   **

background-attachment 设置背景粘附
background-attachment:fixed最常用于给body元素中心设置水印，让水印不随页面滚动而滚动
CSS3设置多背景图片，同逗号隔开
厂商前缀VSP(Vendore Specific Prefixes)：
某些CSS3属性还处于实验性属性，为保证在大多数浏览器以及它们的实验性中能够使用这个属性，应该针对想要支持的浏览器为该属性添加VSP。每个浏览器只能使用各自能理解的属性声明。
- -moz- /* Firefox*/
- -webkit- /* Chrome,safari*/
- -ms- /* 微软IE*/
- -o- /*Opera*/
  VSP的开头是一个连字符，然后是前缀名，接着又是一个连字符，最后是W3C属性名
  注：在带前缀的属性声明之后还要声明W3C标准属性
  以下CSS属性必须加VSP：
  border-image, translate,linear-gradient,transition,
  radial-gradient,transform,transform-origin

/*默认从上到下渐变*/
background: -webkit-linear-gradient(#FC1212,#EAD317);
/*设置从左至右渐变*/
background:-webkit-linear-gradient(left,#FC1212,#EAD317);
声明角度改变渐变起点
background: -webkit-linear-gradient(-45deg,#FC1212,#EAD317)
设置渐变点
/*一个渐变点*//*起点颜色，渐变点，终点颜色*/
background: -webkit-linear-gradient(#03FDE1,#fff 50%,#03FDE1)
/*两个渐变点，20%处，80%处*/
background: -webkit-linear-gradient(#03FDE1,#0BD924 20%,#FEE202 80%,#03FDE1)
/*为同一个渐变点设置两种颜色可以得到突变效果*/
background: -webkit-linear-gradient(#03FDE1,#0BD924 25%,#0C11F0 25%,#F50A0A 75%,#FEE202 75%,#03FDE1)
放射性渐变
/*默认形状填充元素*/
background: -webkit-radial-gradient(#fff,#64d1dd,#70aa25);
/*放射点位置，形状，颜色*/
background: -webkit-radial-gradient(50px 30px,circle,#fff,#64d1dd,#70aa25);
背景渐变DEMO