CSS核心（十六）背景定位的三种方式 backgkround-position 属性讲解
一、使用像素单位定位背景<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位的三种方式 backgkround-position 属性讲解</title>
</head>
<body>
<style>
div{
width:500px;
height:500px;
/* 背景定位的三种方式 像素、关键字、百分比
调整背景图的位置：backgkround-position
第一个值代表水平距离，即举例盒子左边的尺寸，第二个代表垂直距离，即举例盒子顶边的尺寸*/
background-position:20px 4px;
background-image:url(./img/5.jpg);
background-repeat:no-repeat;
background-color:#abcdef;
}
</style>
<div>
背景background相关属性
</div>
</body>
</html>
显示结果如下：
二、使用关键字定位背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位的三种方式 backgkround-position 属性讲解</title>
</head>
<body>
<style>
div{
width:500px;
height:500px;
/* 背景定位使用关键字：
top/bottom/left/right/center */
background-repeat:no-repeat;
background-color:#abcdef;
background-image:url(./img/5.jpg);
/* 意思是:图片纵向居下对齐，横向居中对齐，如果平铺，则由下向上填充，两边空白自然填充 */
background-position:bottom center;
}
</style>
<div>
背景background相关属性
</div>
</body>
</html>
显示结果如下：
三、使用百分比定位背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位的三种方式 backgkround-position 属性讲解</title>
</head>
<body>
<style>
div{
width:500px;
height:500px;
/* 背景定位使用百分比 */
background-color:#abcdef;
background-repeat:no-repeat;
background-image:url(./img/5.jpg);
/* 50% 50%表示横向居中，纵向居中，60% 50%表示横向向右移动10% */
background-position:60% 50%;
}
</style>
<div>
背景background相关属性
</div>
</body>
</html>
显示结果如下：
感觉得自己很愚昧,自认为自己还不错,原来我差劲得要命,多谢你的提醒. 虽然不知道我已经是第几个回贴的人了,但是看了这篇我还不太懂的文章后我仍然深有感触,如果真想你说的那样的话,对我这个大一的初学者来说是一种莫大的帮助,我非但不会放弃编程,这使得我更有动力,我一定会按照大家说的并结合自己的方法,搞好编程. 是啊，重知识轻技术的后果 很有感悟 好文章 我是初学者,很受益.谢谢 呵呵，惭愧！ 写的非常棒。感触很深！ 这太使我我感动了，作为一个计算机专业的人，我觉的他说的太对了 虽然不知道我已经是第几个回贴的人了,但是看了这篇我还不太懂的文章后我仍然深有感触,如果真想你说的那样的话,对我这个大一的初学者来说是一种莫大的帮助,我非但不会放弃编程,这使得我更有动力,我一定会按照大家说的并结合自己的方法,搞好编程.