HTML CSS 背景处理

css 允许纯颜色作为背景颜色，也允许图片作为背景。

一、背景颜色

使用 backgourd-color 这个属性为元素设置背景色，这个属性接受任何合法的颜色值。

p

上面这条是把 p 标签的背景色设为红色。

如果一个元素的背景没有设置颜色，那它的背景默认是透明的。

二、背景图像

把图像放入背景，就需要用到 background-image 属性。background-image 的默认值是 none，表示背景没有任何的背景图片。

body

这条规则就是把 body 的背景设置为图片 bg.jpg 。

如果想对某个元素应用背景图片

p.flow

这样只针对 p 标签使用 .flow 类选择器的应用这个背景。

this has a background image!

三、背景图像重复

图像原图很小，就像一个大桌子上放了一个特别小的桌布。想把图扩张到整个背景，就需要 background-repeat 属性。repeat-x 和 repeat-y 允许图像在水平和垂直方向重复平铺，no-repeat 不允许图像在任何方向平铺。

body{

background-image:url(bg.jpg);

background-repeat:repeat-y;

}

body{

background-image:url(bg.jpg);

background-repeat:repeat-x;

}

这个规则是一个背景图片出现在 body 的左上角，如果不平铺的话，就原图显示在左上角。

四、背景图定位

使用 background-position 这个属性来控制背景图在元素里的显示位置。

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-position:center center;

}

上面的规则就是让背景图片，在元素的中央显示。

位置的关键字有：center top bottom left right。

background-position 的位置由两个位置共同决定，background-position:top left ，这个就是左上角，background-position:bottom right 就是右下角，等等...

还有用百分值来表示的，例：

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-position:50% 50%;

}

这个规则也是让背景图片，在元素的中央显示。

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-position:66% 33%;

}

background-position 的默认值是 0% 0%，在功能上相当于 top left。

五、背景关联

background-attachment，这个属性就是可以让背景图片固定在某个位置或者不固定。比如文档比较长，出现滚动条。这时候背景图片就会随着滚动而滚动，如果想让背景图片固定在某一点不动，就可以用 background-attachment:fixed，

body{

background-image:url(bg.jpg);

background-repeat:no-repeat;

background-attachment:fixed;

}

如果想让背景图片随着滚动，就用background-attachment:scroll;