js css如何让DIV背景图片变暗。

html-css010

js css如何让DIV背景图片变暗。,第1张

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('#a').css('-webkit-filter', 'grayscale(50%)')。

3、浏览器运行index.html页面，此时下方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

}

2种方法，使用css3,的translate动画，但是低版本浏览器不兼容。

第二种使用jquery的fadeIn效果，比较方便，推荐第二种。

$('img').hover(function(){

$(this).hide().fadeIn()

},function(){

$(this).show()

})