在 Github 上闲逛的时候,看到这样一句话:

background-image 是从 padding 边缘的左上角起而到 border 的右下角边缘止。

Exo me??? 说好的默认 background 填充于 border-box 呢?

要谈这个问题,首先得从老生常谈的盒模型(Box Model)说起:

Box Model

在 CSS2.1 Box Model 中,一个标准的盒模型如下:

其中:

  1. content edge 为止的被称为 content-box
  2. padding edge 为止的被称为 padding-box
  3. border edge 为止的被称为 border-box

而盒模型和背景的绘制有什么关系呢?

在 background image 的绘制中,有两个因素决定了绘制区间:positioning areapainting area

Positioning Area

顾名思义,这个因素决定了背景图片的相对定位区域,类比 position: absolute 的定位。在 CSS 中能改变这个因素的属性是 background-origin,取值为

content-box | padding-box | border-box

正对应上文提到的三种盒子。

而该属性的默认值为 padding-box。也就是说,当默认 background-position: 0% 0% 的时候,背景图片是从 padding 的左上角开始绘制的!

See the Pen background-origin prop by Dolphin Wood (@idiotWu) on CodePen.

道理我都懂,可是为什么不管点到哪个选项,background-color 始终覆盖整个 border-box

这里就要牵扯到另一个因素了:

Painting Area

Painting Area 即为背景的绘制区域,对应的 CSS 属性是 background-clip,和 background-origin 一样,取值为

content-box | padding-box | border-box

然而 background-clip 的默认值为 border-box!而背景色以及设定了 background-repeat: repeat 的背景图片会尝试铺满整个绘制区域。

See the Pen background-clip prop by Dolphin Wood (@idiotWu) on CodePen.

总结

回到开篇的那句话:

background-image 是从 padding 边缘的左上角起而到 border 的右下角边缘止。

会得出这个结论的原因有三条:

  1. 作者设定了 background-repeat: no-repeat 致使背景图片只绘制一块;
  2. 默认的 background-origin: padding-box 使背景的绘制从 padding-box 的左上角开始;
  3. 默认的 background-clip: border-box 将背景绘制区域限定在 border-box,所以足够大的图片能够被绘制到 border 的右下角。

以上。