欢迎光临
我们一直在努力

CSS3 | 背景图像定位(background-origin)

定义和用法

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

默认值:padding-box
继承性:no
版本:CSS3
语法: background-origin: padding-box|border-box|content-box;

实例

我们创建一个div,设置padding和border(让边框透明),设置位置偏移,最后设置不同的background-origin属性,观察他们的效果。

当设置background-origin: padding-box时,背景图从padding开始定位

.div{
	width: 100px;
	height: 100px;
	padding: 50px;
	border: 50px solid transparent;
	background:url(img/timg.png) no-repeat 10px 30px;
	background-origin: padding-box;
}

当设置background-origin: content-box时,背景图从content开始定位

.div{
	width: 100px;
	height: 100px;
	padding: 50px;
	border: 50px solid transparent;
	background:url(img/timg.png) no-repeat 10px 30px;
	background-origin: content-box;
}

当设置background-origin: border-box时,背景图从border开始定位

.div{
	width: 100px;
	height: 100px;
	padding: 50px;
	border: 50px solid transparent;
	background:url(img/timg.png) no-repeat 10px 30px;
	background-origin: border-box;
}

赞(0) 打赏
未经允许不得转载:散人研 » CSS3 | 背景图像定位(background-origin)
分享到: 更多 (0)

评论 抢沙发

5 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏