CSS背景图片的位置控制

背景图片，我是导进来了，但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不

想这样子放置，那我们又该怎么办呢。不要着急，激动人心的时刻马上到来，现在，让我们来认识一下

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像素下*/
    说了这么多例子，我想你对于定位，有一定的了解了吧。

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: