css3背景(五)—background-origin
时间:2013-08-01来源:杨青青博客作者:杨青青
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/p/2020/07-24/56514e9bd89568db3dceae9020d7badd.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>
你觉得文章内容怎么样