1. 设置背景颜色

    在CSS中，使用background-color属性来设置网页元素的背景颜色，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。

   代码示例：

    body{background-color:yellow;}
    h1{background-color:#00ff00;}
    p{background-color:rgb(255,0,255);}

2.设置背景图像

    在CSS中通过background-image属性设置背景图像。

    元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

    代码示例：

    body{ background-image:url('paper.gif');}

    水平方向平铺

    body{

      background-image:url('gradient2.png');

      background-repeat:repeat-x;

      }

    利用 background-position 属性改变图像在背景中的位置

    body{

     background-image:url('img_tree.png');

     background-repeat:no-repeat;

     background-position:right top;

      }

    背景- 综合属性

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

    点击查看多个图像背景

3.设置图像的透明度

    img {

    opacity:0.4;

    filter:alpha(opacity=40); /* IE8 及其更早版本 */

    }

    img:hover {

     opacity:1.0;

    filter:alpha(opacity=100); /* IE8 及其更早版本 */

    }

    点击查看图像的透明度 - 悬停效果

4.精灵图

精灵图实际上是一种网站性能优化技术，把网页中常用的小图标放在一张大图上，通过改变背景图像的位置来显示目标图像。新浪网、学校网站首页都是用了这种技术，这样可以降低服务器的负荷，提高网站相应性能。

精灵图素材下载

确定图片位置可以参考以下网站  https://www.spritecow.com/