css background 背景

介绍

css background-origin 定位属性是background-position的定位方式。

什么意思呢？一个容器元素有一个border属性，比如下面的css border代码

<!DOCTYPE html>
<html>
<title>css 边框</title>
<head>
<style>
div
{
	border: 10px solid #000;
        width:200px;
        height:200px;
	background-color:gray;
	color:#fff;
	text-align:center;
}

</style>
</head>
<body>
<div>css边框</div>
</body>
</html>
它的边框就比较夸张10个像素，如下效果，

css background-origin 定位方式

那么background-position的定位方式到底是内边框还是外边框呢？所以css background-origin就是为了解决这个问题而应运而生的属性了。

语法

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

属性值

属性值解释如下：

  • padding-box(默认):内边距定位
  • border-box: 内容边框盒定位
  • content-box:内容相对于内容框定位

例子

<!DOCTYPE html>
<html>
<title>css background-origin属性例子</title>
<head>
<style>
	div{
		background-color:gray;
		text-align:center;	
		float:left;
		margin-left:10px;
		margin-top:10px;
		color:#fff;
		width:300px;
		height:200px;
		background-repeat: no-repeat;
		border:20px solid #000;
	    background-image: url(/static/default/yxjc/css/good-morning.jpg);
	}
	.div1{
		background-position: right bottom;
		background-origin: padding-box; 
	}
	.div2{
        background-position: right bottom;
		background-origin: content-box; 		
	}
	.div3{
        background-position: right bottom;
		background-origin: border-box; 		
	}
</style>
</head>
<body>
<div class="div1">
	默认
</div>
<div class="div2">
	content-box
</div>

<div class="div3">
	border-box
</div>
</body>
</html>
输出：

css background-origin 定位方式