#

background-image

• background-image 用于设置元素的背景图片
• 背景图片会盖在 background-color 上面
• 如果设置了多张照片，设置在第一张的图片会显示在最上面，其他图片按顺序层叠在下面

.box {
  /*宽度和高度不设置，页面不显示图片*/
  width: 300px;
  height: 200px;
  background-color: red;
  background-image: url("../img/colorhub.jpg"), url("../img/colorhub\ \(1\)jpg");
}

注意

如果设置了背景图片后元素没有具体的宽高，背景图片是不会显示出来的

background-repeat

用于设置背景图片是否要平铺
可设置的属性值

• repeat 平铺(默认值)
• no-repeat 不平铺
• repeat-x: 水平方向平铺
• repeat-y: 垂直方向平铺

background-size

用于设置背景图片的大小
可以设置的属性值

• auto: 默认值，以背景图片原始尺寸显示
  
• cover: 缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见
  
• contain: 缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
  
• percent: 百分比，相对于容器的百分比
• length: 具体的数值大小，例如 100px

background-position

用于设置背景图片在水平、垂直方向上的具体位置

• 可以设置具体的数值，比如 10px 200px
• 水平方向还可以设置 left, center, right
• 垂直方向还可以设置 top, center, bottom
• 如果只设置了一个方向，另一个方向默认是 center
  

background-attachment

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


属性可设置的值

• scroll: 表示背景相对于元素本身固定，而不是随着它的内容滚动
• local: 表示背景相对于元素的内容固定, 如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
• fixed: 表示背景相对于视口固定, 即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

background

background 是一系列背景相关属性的简写
background: color img position size repeat atachment

• background-size 属性可以省略，如果不省略， background-size 必须紧跟在 background-position 的后面 background-position/background-size
• 其他属性可以省略，顺序任意