|
最近经常给div在加背景图片的时候，发现背景图片的位置总是跟自己想要的效果不一样，所以就粗略的研究了一下，把结果和过程跟大家一起分享一下。现在就用div来举例子，其他的容器也都一样。主要来介绍一下背景background的几个属性。
我们给一个div加上背景后，先仅仅控制背景图片的路径，其他的都不做控制。这时候背景图片的坐标是左上角，如果图片大小大于div的大小，多出来的部分会被切掉，如果图片大小小于div的大小，即，背景图片不能全部覆盖div，他默认会在横向和纵向都把图片进行平铺，也就是你会看到好几个背景图片铺着，来把div填满。要取消掉这种效果，使用background-repeat属性。
background-repeat 属性的几个值：
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
下面来继续看如何控制背景图片的位置。控制位置使用background-position属性，这个属性需要有两个值，分别来控制水平和垂直方向上的值。
background-position可以取的值有百分数、数值、位置三种。
百分数为任意百分数，例如background-position:50% 50%; 表示在水平和垂直方向是都是剧中的
数值例如background-position:10px 10px;表示以左上角为原点，分别偏移了10px的位置
位置的话，水平方向上是left(靠左),center(居中),right（靠右）;
垂直方向上是top(靠顶),center(居中),bottom(靠底)。
例如:background-position:left bottom;表示背景图片靠左下角。
这三种数值也可以组合起来
background-position:10px center 水平方向上偏移右边10px，垂直居中
background-position:center 50% 水平垂直都居中
当图片比div大的时候，background-position控制位置和比div小时控制效果是一样的。可以通过background-position来控制显示图片的哪一部分来作为背景图片
原文：http://www.php1.cn/Content/css_KongZhiBeiJingTuPianWeiZhi_-background-position.html
|