CSS3之背景background-origin

background-origin用来设置元素背景图片的原始起始位置。

语法:

background-origin:border-box|padding-box|content-box;

参数分别表示背景图片是从边框(border-box),还是内边距(padding-box默认值),或者是内容区域(content-box)开始显示。

.wrap{

width:250px;

height:250px;

border:10px dashed #999;

text-align:center;

padding:30px;

background:url(/images/portal/lan16_icon.png);

background-repeat:no-repeat;

background-origin:border-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下

.wrap{

width:250px;

height:250px;

border:10px dashed #999;

text-align:center;

padding:30px;

background:url(/images/portal/lan16_icon.png);

background-repeat:no-repeat;

background-origin:padding-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下

.wrap{

width:250px;

height:250px;

border:10px dashed #999;

text-align:center;

padding:30px;

background:url(/images/portal/lan16_icon.png);

background-repeat:no-repeat;

background-origin:content-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下