鼠标点击DIV时，如何使DIV背景图片变暗？

html-css026

鼠标点击DIV时，如何使DIV背景图片变暗？,第1张

方法一： 用CSS a 伪类控制：把原始背景图作为a的背景图，另用PS做一个变暗后的背景图 \x0d\x0aa{background:url(原始背景图路径) no-repeat}\x0d\x0aa:hover{background:url(变暗后背景图路径) no-repeat}/*鼠标经过变换背景图 也可以只用底色如：background:#000*/\x0d\x0a\x0d\x0a方法二：用Jquery，仍然是变换两个背景图片。\x0d\x0a $('#project').toggle(function(){this.css(background,'背景图路径‘）}，function(){this.css(background,'变暗背景图路径‘）}}） \x0d\x0a\x0d\x0a方法二为点击DIV变换背景。呵，不太明白这样做的确切意图，如果是为了突出链接，只需用a伪类hover变换就行了。因为"点击"外div没有什么意义。如果是"点击"链接，页面己经跳转，是看不到效果的。

如果想改变css背景图片，一般的做法只能使用css滤镜；

css滤镜主要包括：

Speia滤镜     灰度图滤镜     高斯模糊滤镜     反色滤镜     饱和度滤镜  

对比度滤镜    亮度滤镜        色相旋转滤镜      阴影滤镜

css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器都支持，ff和Chrome，opera则主要使用css3的滤镜，这些浏览器在后期版本支持css3的滤镜（目前版本基本都支持html5和css3），通过滤镜改变背景图的颜色和效果，当然这些滤镜主要是为了效果而产生，颜色只是固定的几种效果；了解更多可以参考：http://www.cnblogs.com/fsjohnhuang/p/4127888.html

个别时候，css滤镜还需要结合js使用，才能到达必要效果，其实一般背景图片都是用透明度的css来设置它的颜色度；

透明度css列子：

transparent_class {

filter:alpha(opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

opacity: 0.5

}

以CSS3.3为例来进行设置： Option ->color ->Editor Color ->view setups界面的右上角选择Bright Night 。此时，就可以将编辑窗口的背景设置成黑色了！