background-position
这里先说像素 百分比比较复杂
background-position:xxpx xxpx 这里第一个值指的是x轴坐标 第二个值是y轴坐标
这里使用的坐标系和数学中的坐标系不同 它大概是这样的
-----------------> x轴
|
|
|
|
|
|
|
|
V
y轴
先说说图片比div小得情况 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
此时移动的是图片
再说说几个特殊的值 x轴 left right center y轴 top bottom center
left和top相当于0px right和bottom相当于使图像到达边界的最大值 center就是使图像来到中间位置的值
所以可以用center center来使图片居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <style type="text/css"> .one{ width: 500px; height: 800px; border: 1px solid black; background-image: url(http://s1.meituan.net/www/css/i/sp-header-new.vefe0f047.png); background-repeat: no-repeat; background-position: right bottom;/*使图片停靠在div的右下区域*/ background-position: center center;/*图片在div的中间位置*/ background-position: center top;/*横轴上 图片居中 纵轴上 图片靠顶*/ background-position: 30px 50px; } .two{ width: 43px; height: 40px; border: 1px solid black; background-image: url(http://s1.meituan.net/www/css/i/sp-header-new.vefe0f047.png); background-position: right bottom;/*和前面的规则一样 还是停留在右下区域 确切的说 使得图像的右下角 对齐于div的右下角*/ /*另外一种理解的方式 先假设div区域很大 根据one里面那样对齐好图片之后 因为是停靠在右下区域 抓住div的右下角不动 缩小div*/ /*最好的理解方式是 尤其是对于div小于原始图片很多的时候 这里我们移动的是div 对于right bottom 就是将div相对图片来说 移动到图片的右下角的位置*/ background-position: center center;/*将div移动到相对于图片的中心位置*/ background-position: center top;/*将div移动到相对于图片的x轴中间 y轴的顶部*/ background-position: -43px -150px; /*根据书上的解释 我们说是图片左上角 相对于div左上角在x轴反向移动43px y轴反向移动150px*/ /*或者使用我的理解方式 div相对于图片 x轴移动43px y轴移动150px*/ } </style> <body> 当图片比div小的时候 这个x轴 y轴的数值表示的是图片左上角距离div左上角的距离 <div class='one'></div> 当图片比div大的时候 可以通过x轴 y轴设置负值来实现对图片的裁剪 实际上就是控制图片位置 显示只需要显示的部分 <div class='two'></div> </body> </html>