CSS设置背景

背景相关属性

background-image

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

background-image会盖在background-color上

我们可以设置多个背景图，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

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

background-repeat

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

值	说明
repeat	平铺 --- 默认值 --- x轴和y轴都进行平铺
no-repeat	不平铺
repeat-x	只在`水平方向`平铺
repeat-y	只在`垂直平方`向平铺

background-size

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

值	说明
auto	默认值, 以背景图本身大小显示
contain	保持图片宽高比，缩放背景图，较长的一边铺满元素，可能出现没有被背景图覆盖的白底
cover	保持图片宽高比，缩放背景图，较短的一边铺满元素，以完全覆盖铺满元素, 可能背景图片部分看不见
`<percentage>`	百分比，相对于背景区(background positioning area)
`<length>`	具体的大小，比如100px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      /* 设置背景图片 */
      background-image: url(../images/kobe01.jpg);
      background-repeat: no-repeat;

      /* 设置背景的尺寸 */
      /* background-size: 100% 100%; */
      /* background-size: 100px 100px; */
      background-size: 100px auto;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

background-position

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

可以设置具体的数值比如 20px 30px
水平方向还可以设值:left、center、right
垂直方向还可以设值:top、center、bottom
如果只设置了1个方向，另一个方向默认是center

background-attachment

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

值	说明
scroll	此关键属性值表示`背景相对于元素本身固定，而不是随着它的内容滚动`
local	此关键属性值表示`背景相对于元素的内容固定`。如果一个元素拥有滚动机制，`背景将会随着元素的内容滚动`
fixed	此关键属性值表示`背景相对于视口固定`。`即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动`

background

background是一系列背景相关属性的简写属性

.box {
  width: 300px;
  height: 300px;
  /*
  background: <background-image> || <background-color> || <background-position>/<background-size> <background-repeat> <background-attachment>
  1. background的任意属性都是可以省略的，且没有顺序要求
  2. background-size可以省略，如果不省略，background-size必须紧跟在background-position的后面，且以/进行分割
  */
  background: url(./images/avatar.jpg) #f00 top/contain no-repeat scroll;
}

background-image和img对比

如果该图片是网页的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片，那么推荐使用img标签
如果该图片只是为了美化网页，没有该图片并不影响网页的整体阅读，此时推荐使用background-image

总结 img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片 background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

07_CSS设置背景