CSS | 背景来源属性

简介

CSS 背景来源属性（background-origin）用于指定背景图片相对于背景框边界盒（border box）、内边界盒（padding box）或内容盒边界盒（content box）来定位。

语法

background-origin: padding-box | border-box | content-box;

取值

• padding-box：背景图片相对于内边界盒进行定位；
• border-box：背景图片相对于边框盒进行定位；
• content-box：背景图片相对于内容盒进行定位；

使用示例

.container {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid #ccc;
  background-image: url('bg-image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  /* 以内容盒边界盒为准定位背景图片 */
  background-origin: content-box;
}

在上面的示例中，我们设置了一个 .container 元素，并给它的内容和边框设置了一些样式，同时为它的背景图片设置了一个居中显示的定位（background-position: center;），最后使用 background-origin: content-box; 来以内容盒边界盒对背景图片进行定位。运行结果如下图：

总结

CSS 背景来源属性用于控制背景图片的定位方式，详细定义了三种定位方式：以内容盒边界盒为准、以内边界盒边界盒为准、以边框盒边界盒为准。根据实际需求选择定位方式可以让布局更加灵活。