三个 background 有关的属性

image.png

• background-attachment:

  • scroll(默认)：当元素所包含的子元素的内容的范围超出其本身的范围时，元素的背景图的位置会默认随着滚动条滚动
  • fixed：位置固定，不会随着元素的滚动条变化而变化

• background-position:

  • 百分比：以元素和背景图的左上角为 (0%, 0%)，右下角为 (100%, 100%)，假设属性值为 %x, y%，则意味着将元素 (x%, y%) 对应的点和背景图 (x%, y%) 对应的点重合，此时背景图的位置即为所规定的位置。默认值为 0%，0%，倘若只规定一个值，则垂直方向的值默认为 50%
  • top、left、center、bottom、right：对应百分比为 0%、50%、100% 的同义关键字
  • 单位为 px 的数值 xpx, ypx：第一个值是水平位置，第二个值是垂直位置。表示以元素的左上角为原点，将背景图的左上角放到 (x, y) 坐标的位置；若只提供一个元素，则垂直方向的值为 50%；可以组合使用 px 的数值和百分比的值

• background-size:（假设图中 r1 = W/w, r2 = H/h，wReal 为背景图最终宽度， hReal 为背景图最终高度）

  • contain: rMin = min({r1, r2}), wReal = w * rMin, hReal = h * rMin，如此一来，背景图始终能够完整的显示在元素的范围内
  • cover: rMax = max({r1, r2}), wReal = w * rMax, hReal = h * rMax，如此一来，背景图始终能够完全占满元素的范围，但一般会出现 wReal > W 或者 hReal > H 的情况，此时对于超出的部分，直接裁剪。所以当属性值为 cover 时，若 r1 > r2，则最终背景图的垂直方向上的内容会遭到裁剪；反之，水平方向上的内容会遭到裁剪。裁剪的内容会受 background-position 属性的值的影响，若想不管怎么裁剪都使背景图的内容的中心始终在元素的中心，将 background-position 的值设置为 50% 即可。即：

    .bg-center {
      background: url(xxx.jpg) 50%;
      background-size: cover;
    }