background（MDN）

一、简介

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性

1. background-image：用于为一个元素设置一个或者多个背景图像
2. background-repeat：定义背景图像的重复方式
3. background-position：为每一个背景图片设置初始位置
4. background-size：设置背景图片大小
5. background-origin：规定了指定背景图片 background-image 属性的原点位置的背景相对区域
6. background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
7. background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
8. background-color：设置元素的背景色

当使用 background 属性时，各个背景属性都有初始值

.test{
    background-image: none;
  background-repeat: repeat;
  background-position: 0% 0%;
  background-size: auto auto;
  background-origin: padding-box;
  background-clip: border-box;
  background-attachment: scroll;
  background-color: transparent;
}

二、各个属性

1. background-image

用于为一个元素设置一个或者多个背景图像

• 在绘制时，图像以 z 方向堆叠的方式进行，第一个图像“最接近用户”。
• border 在 background-image 之上绘制
• background-color 在 background-image 之下绘制
• 图像的绘制与盒子及边框的关系由 bakground-clip、background-origin 中定义
• 默认值为 none

• 渐变是一种特殊的图片类型，常用的有线性渐变 linear-gradient()、圆锥形渐变 conic-gradient()

  .test {
  background-image: url("//placekitten.com/200/300"), url("//placekitten.com/300/300")
  }

  linear-gradient() 用法贴士

• 先指定渐变的角度，然后写 color 值并可跟随一个终点位置

• 角度默认值为 to bottom

• 第一个 color 终点之前的颜色都是第一个 color，最后一个 color 终点之后的颜色都是最后一个 color

  .test {
  background-image: linear-gradient(to bottom, red, green, blue)
  })

  conic-gradient() 用法贴士

• 先指定渐变角度及渐变位置，然后写 color 值并可跟随一个终点位置

• 角度及渐变位置默认为 from 0 at 50% 50%
• 第一个 color 终点之前的颜色都是第一个 color，最后一个 color 终点之后的颜色都是最后一个 color
• 用法和 linear-gradient 一样，主要区别就是颜色方向的调整从一条直线变成一个圈
• 角度渐变在 Chrome 中2018 年才正式开始支持

  .test{
  background-image: conic-gradient(from 0 at 50% 50%, red 120deg,green 120deg,green 240deg,blue 240deg, blue 360deg);
  }

2. background-repeat

定义背景图像的重复方式

• 可以在 x、y 方向上分别设置重复方式，我写的最多的是 no-repeat，对图片在 x、y 方向上都不重复

  /* x、y 方向上都不重复 */
  .test{
    background-repeat: no-repeat;
  }
  /* 只在 x 方向上重复 */ 
  .test2{
  background-repeat: repeat-x;
  }
  /* 只在 y 方向上重复 */
  .test3{
    background-repeat: no-repeat repeat;
  }

3. background-position

为每一个背景图片设置初始位置，这个位置是相对于 background-origin 定义的位置涂层

• 设置位置时，可以直接写关键字、百分数、像素，写法很多
• 当有多个图片时，可以写多个位置，用逗号隔开，如果只写一种位置，就会为这些图片都设置成这个位置 ```css .test{ background-position: center; }

/ 设置两个图片的位置 / .test2{ background-position: center, left 0, top 20px; }

<a name="dUTlc"></a>
### 4. background-size
设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者保持其原有比例的同时缩放到元素的可用空间的尺寸
- 设置背景图片大小时，可以写关键字、百分数、像素，写法很多
- 当有多个图片时，可以写多个大小，用逗号隔开，如果只写一种位置，就会为这些图片都设置成这个大小
```css
.test{
    background-size: contain;
}
.test2{
    background-size: cover;
}
.test3{
    background-size: 50%, 30%;
}

5. background-origin

规定了指定背景图片background-image 属性的原点位置的背景相对区域

• 一般不设置它，遇到特殊情况时会调节一下，可以设置三种值 ```css /背景图片的摆放以padding区域为参考/ .test{ background-origin: padding-box; }

/背景图片的摆放以border区域为参考/ .test2{ background-origin: border-box; }

/背景图片的摆放以content区域为参考/ .test3{ background-origin: content-box; }

<a name="t1K3e"></a>
### 6. background-clip
设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
- 一般不设置它，遇到特殊情况时会调节一下，可以设置三种值
```css
/* 背景延伸至边框外沿（但是在边框下层）*/
.test{
    background-clip: border-box;
}
/*背景延伸至内边距（padding）外沿。不会绘制到边框处*/
.test2{
    background-clip: padding-box;
}
/*背景被裁剪至内容区（content box）外沿*/
.test3{
    background-clip: content-box;
}

chrome 浏览器中，加上前缀，将其值设为 text，可以设置背景附着到文字上

/*背景被裁剪成文字的前景色*/
.test{
  -webkit-background-clip: text;
  color: transparent;
}

7. background-attachment

决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动

• 一般不设置它，遇到特殊情况时会调节一下，可以设置三种值 ```css /背景相对于元素本身固定/ .test{ background-attachment: scroll; }

/背景相对于元素的内容固定/ .test2{ background-attachment: local; }

/背景相对于视口固定/ .test3{ background-attachment: fixed; }

<a name="kD3J7"></a>
### 8. background-color
设置元素的背景色
- 属性值为色值或关键字
```css
.test{
    background-color: rgba(0,0,0,0.2);
}
.test2{
  background-color: transparent;
}

三、一些例子

1. 透明格子背景

.test{
  background: linear-gradient(45deg, #F2F3F7 25%, transparent 25%, transparent 75%, #F2F3F7 75%) 0 0/16px 16px, linear-gradient(45deg, #F2F3F7 25%, transparent 25%, transparent 75%, #F2F3F7 75%) 8px 8px/16px 16px, #FFF;p
}

2. 背景图片居中

/* 优先撑满容器 */
.test{
    background: url("//placekitten.com/200/300") no-repeat center/contain tan;
}
/* 优先完整展示图片 */
.test2{
  background: url("//placekitten.com/200/300") no-repeat center/cover tan;
}

四、参考链接

background - MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/background
background - CSS Tricks：https://css-tricks.com/almanac/properties/b/background/