CSS中background的用法

CSS中  background 是一个很基本的而且比较常用的样式

background : background-color || background-image || background-repeat || background-attachment || background-position

这个是 background 的几个参数，这些参数并不是都要写上的。

background-color： 背景颜色，这里可以写英文，可以写RGB，可以写#xxxxxx
                   transparent : 　背景色透明

background-image：背景图片，只能写 none 或者 url (url)

background-repeat：背景图象的平铺
                   repeat : 　背景图像在纵向和横向上平铺
                   no-repeat : 　背景图像不平铺
                   repeat-x : 　背景图像在横向上平铺
                   repeat-y : 　背景图像在纵向平铺

background-attachment：背景图象的流动性
                       scroll : 　背景图像是随对象内容滚动
                       fixed : 　背景图像固定

background-position ：背景图象的位置
                      length : 　百分数 | 由浮点数字和单位标识符组成的长度值。
                      position : 　top | center | bottom | left | center | right

background-position 这个参数很有意思，一般可能很少人用到，不过这个参数理解好了，确实有很大的用处，首先background-position有2个参数：background-position:(X Y),这个一般有2种情况，一个是div比背景图片大，则用这个属性背景图片会在div里浮动，如div比背景图片小，那么就变成了背景图片的变幻，具体的用代码说明吧。

这个是做的一个圆角的div，
<div style="width:700px">
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;">
        <div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;">
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div>
        </div>
    </div>
    <div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;">
        <div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;">
            <div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div>
        </div>
    </div>
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;">
        <div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;">
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div>
        </div>
    </div>
</div>