CSS速查列表-1-（background）背景

CSS 背景

CSS 属性定义背景效果：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

     1、颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

     2、background-image:url('xxxxxx.jpg')

 

     3、 repeat：背景图像将向垂直和水平方向重复。这是默认

           repeat-x：只有水平位置会重复背景图像

           repeat-y：只有垂直位置会重复背景图像

           no-repeat：background-image不会重复

           inherit：指定background-repea属性设置应该从父元素继承

 

      4、scroll：背景图片随页面的其余部分滚动。这是默认

           fixed：背景图像是固定的

           inherit：指定background-attachment属性设置应该从父元素继承

           背景图像是否固定或者随着页面的其余部分滚动

 

      5、

关键字

图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。

只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。

如果只有一个关键字，则会默认另一个关键字为 center。background-position:right top;

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置：

background-position:50% 50%;

长度值

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

background-position:50px 100px;

（偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。）

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

body {background:#ffffff url('img_tree.png') no-repeat right top;}