css background 背景

在css中可以通过 background-position属性可以定位背景图在元素中的位置。

也就是背景图片距离元素左上角的位置。

语法

background-position: value;

属性值

其中valu的值可以为

类型说明
关键字：top、right、bottom、left和center
1、top left, left top 等价于 0% 0%. 左上角
2、top, top center, center top 等价于 50% 0%. 顶部居中
3、right top, top right 等价于 100% 0%. 右上角
4、left, left center, center left 等价于 0% 50%.垂直左居中
5、center, center center 等价于 50% 50%. 上下和垂直都居中
6、right, right center, center right 等价于 100% 50%. 垂直右居中
7、bottom left, left bottom 等价于 0% 100%.  左下角
8、bottom, bottom center, center bottom 等价于 50% 100%. 底部居中
9、bottom right, right bottom 等价于 100% 100%. 右下角
长度值：px、em、rem

第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用 % 和 position 值。

百分比： x% y% 第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。

其中默认值为0% 0%，即背景图在元素的左上角。一般情况下我们都是用关键字或者百分比来定位，因为长度值定位显得有些许麻烦。

例子

<!DOCTYPE html>
<html>
<title>css background-position属性例子</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;
	    background-image: url(/static/default/yxjc/css/good-morning.jpg);
	}
	.div1{
		background-position: 100% 100%;
	}
	.div2{
		background-position: right bottom;
	}
	.div3{
		background-position: 100px 67px;
	}
</style>
</head>
<body>
<div class="div1">
	右下角 百分比
</div>
<div class="div2">
	右下角 关键字
</div>

<div class="div3">
	使用px定位有点麻烦需要计算<br>
	右下角 px像素
</div>
</body>
</html>
输出：

css background-position 背景图片位置或者定位

其中，使用px定位优点麻烦需要计算。