您现在的位置是:蓝石榴 > 个人博客 > 前端

个人博客

CSS3之背景background-origin

2017-07-31前端 1407
background-origin用来设置元素背景图片的原始起始位置。语法: background-origin:border-box|padding-box|content-box;参数分别表示背景图片是从边框(border-box),还是内边距(padding-box默认值),或者是内容区域(content-box)开始显示。
1.使用方法:

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

语法:

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

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

2.1、border-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;

}

效果如下

2.2、padding-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:padding-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下

2.3、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:content-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下

很赞哦!(407)