现在的位置: 首页 > 软件开发 > 正文

CSS BACKGROUND定位背景上下左右偏移

2013年04月02日 软件开发 ⁄ 共 7493字 暂无评论 ⁄ 被围观 2,659+

css中我们经常使用background加载图片作为背景,这个背景图片可以通过具体属性的设置调整其上下左右偏移,调整背景图的上下左右偏移可以通过设置background属性或background-position属性来实现。我们以div加背景图片来举例子,其他的容器也都一样。主要来介绍一下背景background/background-position的几个属性。

background语法格式:

background:[1.color] [2.url(图片路径)] [3.background-repeat平铺属性] [4.水平方向偏移] [5.垂直方向偏移]
background-position:[水平方向偏移] [垂直方向偏移]

我们给一个div加上背景后,先仅仅控制背景图片的路径,其他的都不做控制。这时候背景图片的坐标是左上角,如果图片大小大于div的大小,多出来的部分会被切掉,如果图片大小小于div的大小,默认会在横向和纵向都把图片进行平铺,也就是你会看到好几个背景图片铺着,来把div填满。要取消掉这种效果,使用background-repeat属性。

background-repeat平铺属性的几个值:

repeat :     默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x :    背景图像仅在横向上平铺
repeat-y :    背景图像仅在纵向上平铺

下面来看如何控制背景图片的位置。background的4和5属性和backgroudn-position是控制位置使用的偏移属性,这2个属性分别来控制水平偏移和垂直方向偏移。

位置偏移属性可以取的值有百分数、数值、位置三种。取值是图片的左上角相对于区域左上角的偏移量。向右,向下(x正半轴,y负半轴)为正值;向左,向上(x负半轴,y正半轴)为负值。位置的话,水平方向上是left(靠左),center(居中),right(靠右);垂直方向上是top(靠顶),center(居中),bottom(靠底)。例如:

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; #表示背景图片靠左下角

这三种数值也可以组合使用

background:url(your/pic/path) no-repeat 10px center; #向右10px,垂直居中
background-position:10px center; #向右10px,垂直居中
background:url(your/pic/path) no-repeat center 50%; #水平垂直都居中
background-position:center 50%; #水平垂直都居中

当图片比div大的时候,background-position控制位置和比div小时控制效果是一样的。可以通过background-position来控制显示图片的哪一部分来作为背景图片。

一些例子:

background-position例子:
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;">background-postion例01</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;">background-postion例02</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:bottom;">background-postion例03</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:center;">background-postion例04</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:inherit;">background-postion例05</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:left;">background-postion例06</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:right;">background-postion例07</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:top;">background-postion例08</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:27px 27px;">background-postion例09</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:-17px -17px;">background-postion例10</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:27px center;">background-postion例11</div>
<div style="background-image:url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;background-color:#ffc;width:100px;height:100px;float:left;color:green;background-repeat:no-repeat;background-position:center 27px;">background-postion例12</div>
background-postion例01
background-postion例02
background-postion例03
background-postion例04
background-postion例05
background-postion例06
background-postion例07
background-postion例08
background-postion例09
background-postion例10
background-postion例11
background-postion例12
background例子:
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg);border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例01</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例02</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat bottom;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例03</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat center;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例04</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat inherit;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例05</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat left;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例06</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat right;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例07</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat top;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例08</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat 27px 27px;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例09</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat -17px -17px;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例10</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat 27px center;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例11</div>
<div style="background:#ffc url(http://www.opensoce.com/wp-content/uploads/2013/04/test.jpg) no-repeat center 27px;border:1px dashed black;width:100px;height:100px;float:left;color:green;">background例12</div>
background例01
background例02
background例03
background例04
background例05
background例06
background例07
background例08
background例09
background例10
background例11
background例12

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#