css背景

背景色

background-color属性

p{background-color:red; padding:20px}

增加了内边距使得背景色更加的突出。

背景图像

background-image属性

p{background-image:url;}

这里为所有的段落设置了背景。

我们可以为指定的地方设置背景，利用css类来。

p.flower{background-image:url}

使用的时候：

<p class="flower">hello</p>

背景重复

主要指平铺，用background-repeat属性。

background-repeat属性的属性值有：repeat-x,repeat-y,no-repeat.

ex:

body{

    background-image:url:

    background-repeat:no-repeat;

}

则这样不进行平铺。

背景定位（放置背景的位置）

主要有这些方法：

关键字，百分数，长度值。

关键字：

top,center,left,right,bottom.

由两个关键字确定，如果仅仅写了一个关键字，则另一个关键字默认是center。

ex;

p

{

    background-image:url;

    background-repeat:no-repeat;

    background-position:top;

}

百分数：

ex:

body

{

    background-image:url;

    background-repeat:no-repeat;

    background-position:50%,50%;

}

由于百分数值同时应用于元素和图像，即图像中描述为50%50%的点与元素中描述为

50%50%的点对齐。

另外：0%0%其左上角放在元素内边距区的左上角。

         100%100%其右下角放在右下边距的右下角。

如果仅仅提供一个百分数，则另外一个为50%，这和关键字的类似。

长度值

长度值是由元素的左上角偏移的量。

例如：background-position:50px 100px;

则其描述了：由元素的左上角向右偏移50px，再向下偏移100px。

固定背景

标准说法为：背景关联。当文档比较长时，我们下拉文档，背景图像也会跟着动，可以

通过background-attachment属性来设置，从而防止这种滚动。

默认的background-attachment属性的值为scroll，即会滚动，我们可以把它

设置为fixed，这样就固定了。

ex:

background-attachment:fixed:

总结：

css的背景属性有：

background-attachment

background-repeat

background-position

background-image

background-color

$可以将所有的背景属性均设置在一个声明中：

ex:

body

{

    background:red url no-repeat fixed top;

}