1、属性简介
background-origin:border|content|padding|!important
border:从border区域开始显示背景;
content:从content区域开始显示背景;
padding:从padding区域开始显示背景。
/*背景图像相对边框盒来定位*/
background-origin:border-box;
/*背景图像相对内容框来定位*/
background-origin:content-box;
/*背景图像相对于内边距框来定位*/
background-origin:padding-box;
/*提高指定样式规则的应用优先权*/
background-origin:!important;
2、浏览器兼容性(1)IE6、7、8不兼容(2)Firefox 3.0、3.5兼容(3)Chrome 1.0.x、2.0.x兼容
3、属性实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3之background-origin</title>
<style type="text/css">
body{
background-color:#FCC;
60%;
height:100px;
font-size:24px;
font-weight:bolder;
}
div{
background:#C6F url(image.jpg);
background-color:#9FF;
100%;
height:100%;
-moz-background-origin:border;
-webkit-background-origin:border;
/*-moz-background-origin:content;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-webkit-background-origin:!important;
-moz-background-origin:!important;*/
}
</style>
</head>
<body>
<div>
CSS3之background-origin
</div>
</body>
</html>
4、运行结果