HTML中 background背景类属性详细介绍

转载“共享博客”

原文 http://www.sharedblog.cn/?post=115

 

1.背景颜色

    语法：

background-color: 颜色值;

    注：颜色值的设置方法同字体颜色。

    字体类介绍：http://www.sharedblog.cn/?post=110

 

2.背景图

    语法：

background-image: url(图片路径);

    注：网页中常见的两种图片形式：插入图片和背景图

        ① 使用img标签插入图片：数据型的图片（经常需要更换网页内容的图片）；

        ② 背景图：用来装饰网页的图片（在一定时期内不会发生改变的图片），可以在背景图上显示文字和其他内容。

 

3.背景平铺属性

    语法：

background-repeat: no-repeat (不平铺) | repeat (平铺) | repeat-x (横向平铺) | repeat-y (纵向平铺);

 

4.背景图位置

    语法：

background-position: left | center | right | 数值   top | center | right | 数值;

    注：①第一个值代表水平方向，第二值代表垂直方向；

          ②当设置为数值时，向右，向下为正，向左，向上为负；

          ③当两个值都为 centrer 时，可以省略第二个值。

 

5.背景属性简写方式

    语法：

background: 背景色  背景图  背景平铺  背景图位置;

    eg:

background: pink  url(图片路径)  no-repeat  right  bottom;

    注：简写方式中省略的属性值使用默认值。

    背景色与背景图一块设置：http://www.sharedblog.cn/?post=45

 

 

6.背景图显示规则

    ①当背景尺寸等于容器尺寸时，背景图恰好显示在容器中；

    ②当背景尺寸小于容器尺寸时，背景图默认平铺，直至铺满整个容器；

    ③当背景尺寸大于容器尺寸时，只能显示容器范围以内的背景图。

 

7.背景图固定

    语法：

background-attachment: scroll (滚动) | fixed (固定);

    注：当容器出现滚动条时，设置fixed，背景图固定不跟随滚动条滚动。

 

8.网页中常见的图片格式：

    ①jpg：有损压缩格式，靠损失图片本身的质量来减小图片体积，适用于色彩数量丰富的图片；

    ②gif：有损压缩格式，支持动画，支持透明；

    ③png：有损压缩格式，支持透明。