Background

来源：MDN-background

background-color（背景颜色）

/* 定义背景颜色 */
background-color: dodgerblue;
background-color: rgba(0, 0, 0, 0.5);

background-image（背景图片）

/* 设置背景图片,如果既有图片还有颜色，图片会位于颜色上方 */
background-image: url(./img/bgc.png);

1. 网页的背景图片、logo、装饰性图片、精灵图一般都使用 background-image，因为位置便于控制
2. 不要忘记写 url
3. 使用背景图像时，请使用不会干扰文本的图像。
4. 可以同时插入多张背景图片
5. 既有背景颜色又有背景图片，背景图片会置于背景颜色上方

background-repeat（背景重复）

属性	含义
no-repeat	不平铺
repeat-x	横向平铺
repeat-y	纵向平铺

background-attachment（背景附着）

属性	含义
scroll	背景图像随着页面的滚动一起移动
fixed	背景图片固定不动

background-position（背景图像的位置）

background-position: x y;

x 坐标和 y 坐标，可以使用方位名词或者精确位置
方位名词:

1. 如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如 left top 和 top left 效果一样
2. 如果只指定了一个方位名词，则另一个值默认为 center

精确位置:

1. 百分数或者长度值
2. 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标
3. 如果只指定了一个数值那该数值一定是 x 坐标，y 坐标垂直居中

混合单位
如果指定两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

background-size（背景大小）CSS3

background-size: width height;

1. 参数可以是绝对单位也可以是相对单位
2. cover:图片完全覆盖盒子大小，可能有部分背景显示不全
3. contain:图片的宽度和高度等比例拉伸，当图片的宽度或者高度铺满盒子时就不再进行拉伸，可能会留有空白

.box {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 2px solid #000;
  background: url(../../img/dog.jpg) no-repeat;
  /* 1.background-size: 背景宽度 背景高度; */
  /* background-size: 400px 400px; */
  /* 2.只写一个参数肯定是宽度，高度省略了，背景会等比例缩放 */
  /* background-size: 400px; */
  /* 3.里面的单位可以跟%，相对于父盒子来说的 */
  /* background-size: 50%; */
  /* 4.cover 要完全覆盖div盒子 可能有部分背景显示不全 */
  /* background-size: cover; */
  /* 5.contain 宽度或者高度等比例拉伸，当宽度或者高度铺满div盒子就不在进行拉伸了 */
  /* background-size: contain; */
  background-size: 50%;
}

background:linear-gradient(背景渐变)CSS3

来源：MDN-CSS 渐变

渐变主要有：线性，径向，圆锥。

以下为线性渐变的使用方式，其他参考文档

/*         
      通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
      注意：渐变属于图片，在任何可以使用img的地方都可以使用渐变。

      线性渐变：颜色沿着一条直线发生变化
      background: -webkit-linear-gradient(起始方向,颜色1，颜色2，...)
      background: -webkit-linear-gradient(left, red, blue);
      起始方向:可以是方位名词（top right bottom left）deg 度数、turn 圈。省略默认为top
      渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，
      也可以手动指定渐变的分布情况
      repeating-linear-gradient()可以平铺的线性渐变
        */

background: -webkit-linear-gradient(red, blue);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);
background: -webkit-linear-gradient(45deg, red, green, blue);
background: -webkit-linear-gradient(1turn, red, green, blue);

注意：

1. 一定看浏览器的私有前缀，而且必须添加浏览器的私有前缀，否则渐变没有效果
2. 属性之间的逗号一定是英文的逗号，否则渐变没有效果

background-origin（背景图的原点）

1. padding-box:从 padding 区域开始显示背景图像。（默认值）

2. border-box:从 border 区域开始显示背景图像。

3. content-box:从 content 区域开始显示背景像。

background（简写）

1. 不推荐简写
2. 可以不按照顺序，所有参数可有可无