CSS background-origin 属性

此 CSS 属性有助于我们调整网页的背景图像。它指定了背景定位区域，即背景图像的起点。当 background-attachment 的值为 fixed 时，此 CSS 属性将不起作用。

background-origin 属性类似于 background-clip 属性，但它会调整背景的大小而不是裁剪它。默认情况下，元素的起点是屏幕的左上角。

如果元素有多个背景图像，则可以为每个背景图像指定不同的 background-origin 属性值，用逗号分隔。每个图像将与相应的 background-origin 属性值匹配。

语法

该属性的值列表如下。

让我们通过一些图例来理解这个属性。

示例 1

在这个示例中，有三个带有背景图像的 div 元素。在这里，我们使用了 background-origin 属性的 padding-box、border-box 和 content-box 值。

输出

在下一个示例中，我们将看到当元素有两个背景图像时如何指定 background-origin 属性。

示例 2

在这个示例中，我们为 div 元素使用了两个背景图像。这里有四个 div 元素，我们正在对它们应用 background-origin 属性。

输出

Example3

在这个示例中，我们使用了 background-origin 属性的 initial 和 inherit 值。

输出