【CSS】设置图片背景以及和img的关系

• backgorund-image用于设置元素的背景图片

• 会盖在background-color上，但不是覆盖

• 如果设置了多张图片

• 设置的第一张图片将显示在最上面，其他图片将会层叠在下面
  注意：如果设置了背景图片，而没有设置宽高的情况下，图片显示不出来

• background-repeat用于设置背景图片是否需要平铺

• 常见的值：

• repeat：平铺

• no-repeat:不平铺

• repeat-x:x轴方向的平铺

• repeat-y:y轴方向的平铺

• background-size用于设置背景图片的大小

• auto:默认值，已背景图片本身大小显示

• cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见

• contain: 缩放背景图，宽度或者高度铺满元素，但图片保持宽高比

• < percentage >:百分比，相对于背景区域的百分比

• length:具体的大小，比如100px

• background-position用于设置背景图片在水平和垂直方向的具体位置

• 可以设置具体的数值，如20px,30px

• 水平方向可以设置：left、center、right

• 垂直方向可以设置：top、center、bottom

• 如果只设置了一个方向，那么另一个方向的默认值为center
  

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

• 可以设置3个值

• scroll:此关键属性值表示北京相对于元素本身固定，而不是随着它的内容滚动

• local:表示属性值随着背景相对固定，如果一个元素拥有滚动机制，北京的 内容会随着元素的内容滚动

• fixed:表示北京相对视口固定，北京不会随着元素的滚动而滚动

• background
  

• background中bg-size是可以省略的，如果不省略需要紧跟在background-position后面，并添加/

• 其他属性可以省略，并且顺序是任意的

• background-image和img对比

• 开发中如何选择？
  

• 总结

• img,作为网页内容的重要组成部分，如广告图片、Logo图片、文章配图、产品图片

• background-image，可有可无，让页面更加美观