CSS给背景图定位http://www.cniter.com/tech/css/10049_1.html

background-position:
| [percentage | length]{1,2}
|[top | center | bottom]
| [left | center | right]

background-position:[percentage | length]是用X(横坐标)y(纵坐标)定义,如background-position: 20px 40px;

background-position:[top | center | bottom] 和[left | center | right] 是一样的意思了,三个任意两个搭配可以产生不同的效果.
可以是background-position:top center;center bottom;top bottom;left,right.....

bottom:下,top:上,left:左,right:右,center:中.

下为像素与英文的对照:
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right center = 100% 100%

background可以用来给指定的层填充背景色、背景图片,格式如下:

background:#ccc url('bg.gif') top left no-repeat;
表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
top left表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;

background:url('bg.gif') 20px 100px;
表示X坐标为20像素,Y坐标为100像素的精确定位;

repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值