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

• 这个属性只是设置背景图片的大小，和容器大小没有关系。

• 只作用于引入的背景图片，不作用于背景颜色。

• 写在background-image: url()后面才生效。并不是的，这个是因为background简写形式样式的覆盖。

• ..px ..px(宽 高)

• cover(覆盖)背景图片可能显示不完全，容器完全覆盖。

• contain(包含)图片完整，容器可能有空隙。 当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

• 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。

• 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

background-origin 背景图片填充的位置

该属性表示从哪个位置开始填充图片，如果设置平铺，可能会返回来填充空白部分

设置repeat

• 只作用于引入的背景图片，不作用于背景颜色。

div {
      width: 50px;
      height: 50px;
      border: 20px solid transparent;
      padding: 20px 30px;
      background-color: blue; 
      background-image: url(./a.jpg);
      /* background-repeat: no-repeat; */
      background-origin: padding-box;
      /* background-attachment: fixed; */
    }

• padding-box(默认)：即在padding区域填充

• border-box：在border处填充

• content-box：在content处填充注意：当使用 background-attachment为fixed时，该属性将被忽略不起作用。

background-clip 背景的截取位置

这个属性主要设置从哪个位置开始填充背景图片和颜色并且只填充我们指定的区域。这个也是和backgrond-origin属性的区别。background-origin是从哪个地方开始填充，知道容器的右下角边框处。

• 这里背景图片和颜色都会起效果。

• border-box(默认)：边框及边框以内都会有背景显示。但是边框的颜色会覆盖掉填充的颜色和背景图片。

• padding-box：padding区域即内容区域有背景显示

• content-box：只用内容区域有背景显示

• text（为测试api,不可以使用）：表示剪贴在文字上。如果想要做出剪贴效果，我们需要设置文字颜色为**transparent**

div {
      width: 50px;
      height: 50px;
      border: 20px solid transparent;
      padding: 20px 30px;
      background-image: url(./a.jpg);
      /* 在那些位置开始填充背景颜色和图片 */
      background-clip: content-box;
    }

background-position 背景图片的位置

background-position: right 50px bottom 70px; //这个表示在右下方，然后距离右边50px,距离下边70px

如果不加right等单词，只写数字偏移，他的参考点是左上角。

如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为 center。

如果设置的是百分比。他表示的不是距离容器左边和上边的距离。而是通过计算得来的偏移量.

百分比值的偏移指定图片的相对位置和容器的相对位置重合

• 值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。

• 值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。

• 值50%则代表图片的中点和容器的中点重合。

当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）：

• (container width - image width) * (position x%) = (x offset value)

• (container height - image height) * (position y%) = (y offset value)这个属性的学习请访问mdn

background-attachment 背景图片如何随从文本

• scroll：表示随着滚动条滚动。此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

• fixed: 表示固定位置不变。此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

• local：表示跟随文字滚动。此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll 与 local的区别就是对于容器本身是否可滚动了。

• 如果容器本身可以滚动，对于scroll来说，容器滚动条滚动时，背景图片表现的行为和fixed相对于浏览器中的滚动条的行为一样。对于local来说，他始终都是随着文字一起滚动。

• 对于容器不能滚动，那么对于浏览器中的滚动条来说，二者没有任何区别。这一点可以去mdn上看他的demo演示

background-repeat 背景图片的重复方式

这个属性主要是对于背景图片小于容器大小时，他应该怎么去填充容器。

• no-repeat: 不平铺。

• repeat-x: 只平铺x方向。

• repeat-y: 只平铺y方向。

• space: 图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间。即容器可能不会被全部覆盖。

• round：图像会被压缩或者扩展来填满整个容器。这一点需要看容器的大小。

单值语法中，x，y方向都是一样的。 在双值语法中，第一个值表示水平重复行为，第二个值表示垂直重复行为。

background-image 背景图片

可以设置多个背景图片，并且先设置的最贴近用户。

这个属性可以实现渐变效果，通过设置多个值。

当时学习的两个疑问，哈哈？

为什么渐变可以通过background-size改变大小，他不是背景颜色吗？而且他还可以在background-image上面设置background-size呢？

• 笨，虽然是颜色，但是他的background-image的属性值，所以可以设置background-size，改变的是整体的渐变背景大小。为什么可以利用background-position设置动态渐变？

• 因为我们可以结合完全平铺的方式，虽然改变了位置，还是会完全填充的。我当时忽略了背景完全平铺的方式，认为改变了位置，应该会空出一部分空间的。

<style>
    div {
      width: 500px;
      height: 20px;
      border: 1px solid black;
      background-size: 16px 16px;
      //这里的0表示两侧的渐变颜色是突变，而非平缓过度
      background-image: linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
          #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
      animation: animate 20s linear infinite;
    }
    @keyframes animate {
      to {
        background-position: 200% 0;
      }
    }
  </style>
  <div></div>

background-color 背景颜色

这个不同域背景图片，这个只能设置一种颜色。并且他会被背景图片覆盖。

注意它只能被background-clip该属性影响，表示背景图片从哪个位置填充。