定义和用法
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。 |
浏览器支持
表中的数字指定了完全支持background-origin
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
相关页面
CSS 教程:CSS 背景
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
102
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈