码农教程 - 一技在手,衣食无忧! tools

目录

CSS background-origin 属性

❮上一节 完整的CSS参考 下一节❯

示例

让背景图片从内容的左上角开始：

#example1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(paper.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个background-origin属性指定背景图片的原点位置（背景定位区域）。

笔记：该属性在以下情况下无效：背景附件是"fixed"。

展示演示❯

默认值： 填充盒
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.backgroundOrigin="content-box"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-origin 4.0 9.0 4.0 3.0 10.5

CSS 语法

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

属性值

Value Description Demo
padding-box Default value. The background image starts from the upper left corner of the padding edge Demo ❯
border-box The background image starts from the upper left corner of the border Demo ❯
content-box The background image starts from the upper left corner of the content Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

为 <div> 元素设置两个背景图片。让 "paper.gif" 背景图片从 padding 边缘的左上角开始，让 "img_tree.gif" 背景图片从内容的左上角开始：

#example1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(img_tree.gif), url(paper.gif);
  background-repeat: no-repeat;
  background-origin: content-box, padding-box;
}
亲自试一试 »

相关页面

CSS教程：CSS 背景

HTML DOM 参考：backgroundOrigin 属性


❮上一节 完整的CSS参考 下一节❯