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;
<!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; width:60%; height:100px; font-size:24px; font-weight:bolder; } div{ background:#C6F url(image.jpg); background-color:#9FF; width: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、运行结果