背景颜色、背景图片、背景图片的重复模式、背景尺寸、背景裁剪、图片背景的位置、background综合属性

background-color属性：

• 表示背景颜色
• 可以用十六进制、rgb(),rgba()表示法表示
• padding区域是有背景颜色的

---

background-image属性：

• background-image属性用来设置背景图片，图片路径要写到url()圆括号种，可以是相对路径，也可是http://开头的绝对路径
• background-image：url(image/bg1.jpg);
• 如果样式是外链，那么要书写从CSS出发到图片的路径，而不是从html出发

---

background-repeat属性：

• background-repeat属性用来设置背景的重复模式

值	意义
repeat;	x、y均平铺（默认）
repeat-x;	x平铺
repeat-y;	y平铺
no-repeat;	不平铺

---

background-size属性：

• background-size属性用来设置背景图片的尺寸，兼容到IE9
  
• background-size：100px 200px;宽度 高度
• 值也可以用百分数来设置，表示为盒子宽、高的百分之多少
  
• 需要等比设置的值，写auto

contain和cover

• contain和cover是两个特殊的background-size的值
• contain表示将背景图片智能改变尺寸以容纳到盒子里(让用户看完整我的图片)
• cover表示将背景图片智能改变尺寸以撑满盒子（不留白显示整个图片）

background-clip属性：

• background-clip属性用来设置元素的背景裁切到哪个盒子，兼容到IE9

值	意义
border-box	背景延伸至边框（默认值）
padding-box	背景延伸至内边（padding），不会绘制到边框处（仅在dotted、dashed边框可察觉）
content-box	背景被裁剪至内容区

---

background-attachment属性：

• background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含他的区块滚动

值	意义
fixed	自己滚动条不动，外部滚动条不动
local	自己滚动条动，外部滚动条动
scroll	自己滚动条不动，外部滚动条动（默认值）

---

background-position属性：

• background-position属性可以设置背景图片出现在盒子的位置
• background-position：100px 200px;
• 也可以用top、bottom、center、left、right描述图片位置

---

CSS精灵

• CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫CSS精灵技术，也叫做CSS雪碧图
• 可以减少HTTP请求数，加快网页显示速度，缺点：不方便测量、后期改动麻烦
  

background综合属性：

• 一些常用的背景相关小属性，可以合写到一条background属性中
  

---

线性渐变：

• backgroun-image属性可以用linear-gradient（）形式创建线性渐变背景
  
• 渐变方向可以写成度数：倾斜渐变
  
• 可以设置多个颜色值，并且可以用百分数定义他们出现的位置（彩虹）
  

浏览器私有前缀

• 不同浏览器有不同的私有前缀，用来对实验性质的CSS属性加以标识

品牌	前缀
Chrome	-webkit-
Firefox	-moz-
IE、Edge	-ms-
欧朋	-o-

优点：一些低版本的也可以支持

---

径向渐变：

• 盒子的background-image属性可以用radial-gradient（）形式创建径向渐变背景
  

---