博行教育
作者:itjiao 日期:2009-12-24
CSS背景图片的位置控制
作者:itjiao 日期:2009-10-29
背景图片,我是导进来了,但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不
想这样子放置,那我们又该怎么办呢。不要着急,激动人心的时刻马上到来,现在,让我们来认识一下
background-position、background-position-x及background-position-y吧。
a.基本语法:
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom
b.语法取值:
length :百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | right
c.示例:
body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-
repeat:no-repeat; } /*设置双向坐标,这时相当于完全居中*/
body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-
repeat; } /*设置双向坐标,这时相当于水平居中*/
body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-
repeat; } /*设置纵向坐标,这时相当于垂直居中*/
对于取值为length | top | center | bottom我只写下面三个例子。
body { background-image: url("d:\images\04.jpg"); background-position: top right; background-
repeat:no-repeat; } /*设置双向坐标,这时相当于右上*/
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-
repeat:no-repeat; } /*设置双向坐标,这时相当于中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-
repeat:no-repeat; } /*设置双向坐标,这时相当于距左60像素下*/
说了这么多例子,我想你对于定位,有一定的了解了吧。









