目前，对CSS3支持日趋完善，实现兼容性的渐变背景效果是完全可以的，让背景渐变与背景图片共存的方法很简单，主要要注意的是图片要 保持“最小单元”的准则，选择正确的浏览器，该问题就能得到解决，下面介绍一下具体的解决方法。
1、图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”。另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器。
2、如果兼容程度允许的话，纯色渐变背景可以使用css3的渐变样式，如{background: linear-gradient(left top, red , blue)}，如此一来能够减少切图量，还可以加快网页加载速度，缺点是使用主流浏览器的话，就必须要添加前缀。
3、注意对于webkit核心的浏览器，如Chrome/Safari浏览器，在这些浏览器下要做到渐变背景，也需要使用CSS3 渐变方法，css-gradient，具体就是-webkit-gradient，使用语Firefox浏览器业是有一点差异的。
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向与径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变：
3.1、从上到下的线性渐变：
#grad {
background: -webkit-linear-gradient(red, blue)/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue)/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue)/* Firefox 3.6 - 15 */
background: linear-gradient(red, blue)/* 标准的语法 */
}
3.2、从左到右的线性渐变：
#grad {
background: -webkit-linear-gradient(left, red , blue)/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue)/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue)/* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue)/* 标准的语法 */
}
3.3、线性渐变 - 对角：
#grad {
background: -webkit-linear-gradient(left top, red , blue)/* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue)/* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue)/* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue)/* 标准的语法 */
}
4.径向渐变：
4.1、颜色结点均匀分布的径向渐变：
#grad {
background: -webkit-radial-gradient(red, green, blue)/* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue)/* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue)/* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue)/* 标准的语法 */
}
4.2、颜色结点不均匀分布的径向渐变：：
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%)/* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%)/* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%)/* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%)/* 标准的语法 */
}
4.3、形状为圆形的径向渐变：
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green)/* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green)/* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green)/* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green)/* 标准的语法 */
}
可以的，只要把它们用逗号隔开即可，如果你愿意，你甚至可以用多张图片与多个渐变进行复杂的效果叠加。比如下面是两张图片错开位置后放到渐变背景上的例子：
<style>
#ddiv
{
width:480px height:360px
background: url(图片1) no-repeat 30px 20px, url(图片2) no-repeat 160px 180px,-webkit-linear-gradient(top,#966,#8ff)
}
</style>
<div id="ddiv"></div>
要注意的是，在background中排列的多个背景元素（图片或渐变），前面的会覆盖后面的（假如它们位置重合的话）
