css中我们经常使用background加载图片作为背景,这个背景图片可以通过具体属性的设置调整其上下左右偏移,调整背景图的上下左右偏移可以通过设置background属性或background-position属性来实现。我们以div加背景图片来举例子,其他的容器也都一样。主要来介绍一下背景background/background-position的几个属性。
background语法格式:
[php]background:[1.color] [2.url(图片路径)] [3.background-repeat平铺属性] [4.水平方向偏移] [5.垂直方向偏移]
background-position:[水平方向偏移] [垂直方向偏移][/php]
我们给一个div加上背景后,先仅仅控制背景图片的路径,其他的都不做控制。这时候背景图片的坐标是左上角,如果图片大小大于div的大小,多出来的部分会被切掉,如果图片大小小于div的大小,默认会在横向和纵向都把图片进行平铺,也就是你会看到好几个背景图片铺着,来把div填满。要取消掉这种效果,使用background-repeat属性。
background-repeat平铺属性的几个值:
[php]repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺[/php]
下面来看如何控制背景图片的位置。background的4和5属性和backgroudn-position是控制位置使用的偏移属性,这2个属性分别来控制水平偏移和垂直方向偏移。
位置偏移属性可以取的值有百分数、数值、位置三种。取值是图片的左上角相对于区域左上角的偏移量。向右,向下(x正半轴,y负半轴)为正值;向左,向上(x负半轴,y正半轴)为负值。位置的话,水平方向上是left(靠左),center(居中),right(靠右);垂直方向上是top(靠顶),center(居中),bottom(靠底)。例如:
[php]background:url(your/pic/path) no-repeat 50% 50%;#表示在水平和垂直方向是都是居中的
background-position:50% 50%; #表示在水平和垂直方向是都是居中的
background:url(your/pic/path) no-repeat 10px 10px; #表示以左上角为原点,分别偏移了10px的位置
background-position:10px 10px; #表示以左上角为原点,分别偏移了10px的位置
background:url(your/pic/path) no-repeat left bottom; #表示背景图片靠左下角
background-position:left bottom; #表示背景图片靠左下角[/php]
这三种数