CSS background-origin 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background-origin是 CSS 中用于指定背景图像定位区域的属性，它决定了背景图像相对于哪个框进行定位。

background-origin属性通常与background-clip配合使用。

默认值：	padding-box
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.backgroundOrigin="content-box"

当background-attachment为fixed时，background-origin会被忽略。

常用的实例

接下来通过多个实例演示background-origin属性的用法，来深化您对background-origin属性的理解。

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat:no-repeat;
    background-position:left;
    background-origin:content-box;
}

CSS 语法

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

属性值

值	描述
`padding-box`	默认值，背景图像相对于内边距框来定位。
`border-box`	背景图像相对于边框盒来定位。
`content-box`	背景图像相对于内容框来定位。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。