CSS-背景

CSS背景属性用于定义HTML元素的背景

背景颜色

Background-color属性定义了元素的背景颜色

页面的背景颜色使用在body选择器中

实例：

<style type=”text-css”>


Body{


Background-color:red;


}


</style>

背景图像

Background-image属性描述了元素的背景图像

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

实例：

<style type=”text-css”>


Body{


Background-image:url(images.123.jpg);


Background-color:red;


}

背景图像-水平或垂直平铺

默认情况下background-image属性会在页面的水平或者垂直方向平铺

如果要图片平铺可以使用background-repeat属性

一些图片如果在水平方向与垂直方向平铺，这样看起来很不协调

水平平铺（repeat-x），垂直平铺（repeat-y），不平铺（no- repeat）

实例：

<style type=”text-css”>


Body{


Background-image:url(images/123.jpg)；


Background-repeat:repeat-x;


}


</style>

这个实例是背景图像与文本显示在同一位置，为了让页面排版更加合理，不影响美观，我们可以改变图片位置，可以使用background-position属性来改变图像在背景中的位置

实例：

Body{


Background-image:url(images/123.jpg);


Background-repaet:no-repeat;


Background-position:right
top;


Margin-right:200px;


}


</style>

Background-简写

在以上实例中我们可以看到页面的背景颜色通过了很多属性控制，为了简化这些属性代码，我们可以将这些属性合并到同一个属性中，背景颜色的简写属性为“background”

当使用简写属性时，属性值得顺序为

1.      Background-color

2.      Background-image

3.      Background-repeat

4.      Background-attachment

5.      Background-position

以上属性无需全部使用，可以按照页面的实际需要使用