CSS核心属性3---背景相关

关于背景的css声明

1、背景颜色

语法：选择符{background-color:颜色值;}

2、背景图片的设置

语法：background-image：url(背景图片的路径及全称)；

说明：

网页上有两种图片形式：插入图片、背景图；

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

3、背景图片的显示原则

        1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;

        2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

        3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

4、背景图片平铺属性

语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y ;}

no-repeat:不平铺

repeat：平铺

repeat-x：横向平铺

repeat-y ：纵向平铺

5、背景图片的位置
 语法：选择符{background-position:left/center/right/value    top/center/bottom/value;}

设置水平方向位置                                         设置垂直方向位置

background-position:100px(水平方向)    50px（垂直方向）;

background-position:left  bottom

background-position:值1(水平方向位置)    值2（垂直方向位置）;

说明：背景图片向左方向，向上都是负值

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

6、背景图的固定
 语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}

7、背景属性的缩写语法：background:属性值1   属性值2   属性值3；

例：背景缩写：background:url（背景图片的路径及全称） no-repeat center top；

8、网页上常用的图片格式（压缩图片）

1).jpg:有损压缩格式，靠损失图片身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

2）.gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

3).png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;