background-origin
版本： CSS3
background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。
注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。
示例
background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-origin: inherit;
浏览器支持
|
|
|
|
|
IE9以上版本的浏览器都支持
background-origin
|
||||
语法：
background-origin ：border-box | padding-box | content-box
默认值 ：padding-box
适用于 ：所有元素
继承性 ：无
动画性 ：否
计算值 ：指定值
取值：
-
border-box：从border区域（含border）开始显示背景图像。背景图片的摆放以border区域为参考。 -
padding-box：从padding区域（含padding）开始显示背景图像。背景图片的摆放以padding区域为参考。 -
content-box：从content区域开始显示背景图像。背景图片的摆放以content区域为参考。
| 默认值 | padding-box |
| 适用于 |
所有元素。
::first-letter
and
::first-line
|
| 继承性 | 否 |
| 动画性 | 是 |
| 计算值 | 指定值 |
例子
.example {
border: 10px double;
padding: 10px;
background: url('image.jpg');
background-position: center left;
/* 背景将在内容区padding内部填充 */
background-origin: content-box;
}
#example2 {
border: 4px solid black;
padding: 10px;
background: url('image.gif');
background-repeat: no-repeat;
background-origin: border-box;
}
div {
background-image: url('logo.jpg'), url('mainback.png');
background-position: top right, 0px 0px;
background-origin: content-box, padding-box;
}
<!DOCTYPE html>
<html>
<head>
<style>
p{
width:350px;
height:200px;
border:1px solid #ccc;
background-origin:content-box;
background-image:url("/upload/browser/compatible_chrome.gif");
background-repeat:no-repeat;
background-origin:content-box;
padding:30px;
}
</style>
</head>
<body>
<p>lanmper.cn 学编程-CSS,HTML,PHP,jQuery</p>
</body>
</html>
lanmper.cn 学编程-CSS,HTML,PHP,jQuery