2024年04月15日 css3 css3背景 background origin 懒猪技术
background-origin
说明：background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
1）padding-box：从padding区域（含padding）开始显示背景图像。
2）border-box：从border区域（含border）开始显示背景图像。
3）content-box：从content区域开始显示背景图像。
用法：
在 content-box 中定位背景图片：
div
{
background:url(bg.gif);
background-repeat:no-repeat;
-webkit-background-origin:border-box; /* Safari and Chrome 其他浏览器前缀请自己加上 */
background-origin:border-box;
}
兼容性：IE9以下的版本不支持该属性
示例：
background-origin:border-box
background-origin:padding-box
background-origin:content-box
代码片段：
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3—background-origin</title>
<style type="text/css">
.list{ width:400px;height:80px;border:10px dashed #999 ;
background:url(/d/file/newshtml5/css/2013-08-01/ecf1d9bccb9e2e691074540c53446911.jpg);
background-repeat:no-repeat;
background-origin:content-box;
-webkit-background-origin:border-box; /* Safari and Chrome 其他浏览器前缀请自己加上 */
}
</style>
</head>
<body>
<p class="list">background-origin:content-box</p>
</body></html>
本文链接：http://so.lmcjl.com/news/2154/