css3 background-origin属性控制背景图像的起点位置

CSS3 background-origin属性

CSS3 background-origin属性控制背景图像的起点位置，它可以让你把背景图像的起点定位在元素的边框，内边距，或者内容区域。它是CSS3中的一个新属性，它有三个可选值：border-box，padding-box和content-box。

使用方法

• border-box：背景图像的起点位置定位在元素的边框，也就是说，背景图像会覆盖整个元素，包括边框，内边距，和内容区域。

  div {
      background-origin: border-box;
  }

• padding-box：背景图像的起点位置定位在元素的内边距，也就是说，背景图像会覆盖整个元素，包括内边距，和内容区域，但不包括边框。

  div {
      background-origin: padding-box;
  }

• content-box：背景图像的起点位置定位在元素的内容区域，也就是说，背景图像只会覆盖元素的内容区域，不会覆盖边框和内边距。

  div {
      background-origin: content-box;
  }

CSS3 background-origin属性可以让你更精确地控制背景图像的起点位置，它可以让你把背景图像的起点定位在元素的边框，内边距，或者内容区域，这样你就可以更好地实现你想要的效果。