不需要图片，用js+html就可以实现图片的水平或者垂直方向渐变效果，适用于IE，Firefox，其他浏览器未经过测试。

页面设计经常会用到的渐变的背景图，当需要不同风格的渐变效果就必须准备不同的图片来达到这个要求。但如果用js+html来实现的渐变就省去了上传多个不同渐变图片的麻烦。

原理：
在一个html容器中(div/table/li...)，通过在水平或者垂直方向填充多个不同颜色的div，这些div在两种颜色（起始颜色和终止颜色）之间变化，紧紧排列在一起，最终就形成了图片的渐变效果。但要注意，一定要设置父元素的z-index大于渐变块元素，这样父元素不会被渐变块挡住。

使用方法：
在目标元素加css类：class="gradient 003366 FFFFFF horizontal" 
“gradient” 必须是第一个css类名，在页面中如果元素存在这个类名表示当前元素需要渐变
“003366 FFFFFF” 分别为渐变的起始和结束颜色
“horizontal" 或者”vertical“ 表明是水平或者垂直渐变
例子：table class="gradient 003366 FFFFFF horizontal"...
在body的onload加载函数：changecolor()
这样js会搜索整个页面有“gradient”标志的元素来实现渐变。

优点：
可以随意设置渐变颜色及渐变方向

缺点：
渐变过程中会比较耗资源，所以一般不用于大范围区域的渐变
颜色块如果设置过大，渐变效果不够细腻，但太小会耗更多资源，例子中颜色块是2px

实例:http://www.cenday.com/download/Gradient_example.rar