2、css滤镜主要包括：
Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜
对比度滤镜亮度滤镜色相旋转滤镜 阴影滤镜
3、css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器都支持，ff和Chrome，opera则主要使用css3的滤镜，这些浏览器在后期版本支持css3的滤镜（目前版本基本都支持html5和css3），通过滤镜改变背景图的颜色和效果，当然这些滤镜主要是为了效果而产生，颜色只是固定的几种效果。
4、个别时候，css滤镜还需要结合js使用，才能到达必要效果，其实一般背景图片都是用透明度的css来设置它的颜色度；
透明度css列子：
transparent_class {
filter:alpha(opacity=50)
-moz-opacity:0.5
-khtml-opacity: 0.5
opacity: 0.5
}
CSS不可以同时定义两个背景，不过你可以嵌套一下，比如：在div里面嵌套一个span，然后可以分别设置背景，以达到自己想要的效果。做渐变的背景，要突破浏览器的限制，建议用图片做，先在PS 里面根据需要（纵向或横向）制作一张渐变的图片，然后，裁切成1px高或宽的条。
然后在设置背景的时候， 横向（repeat-x）或纵向平铺（repeat-y）就可以了。
如果是纵向渐变，就做竖条，横向平铺。横向渐变，就是做横条，纵向平铺就可以了。 就这么简单。
1.如果仅仅是光标放到div按钮上按钮背景图片改变，直接用css实现：
.div1{background:url(../images/but_01.gif) }.div1:hover{background:url(../images/but_02.gif)}
2.如果是点击div按钮，按钮背景图片改变，可以用JQuery实现：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<style type="text/css">
.div1
{
width: 300px
height: 300px
border: 1px solid black
background-image: url(Images/1.jpg)
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".div1").bind("click", function () {
$(this).css("background-image", "url(Images/3.jpg)").mouseout(function () {
$(this).css("background-image", "url(Images/1.jpg)")
})
})//bind
}) //ready
</script>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
