怎么通过css改变图片的颜色

html-css06

怎么通过css改变图片的颜色,第1张

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

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

}

首先你的图片必须要是png24格式的，然后你就画好的图片带边缘透明的，如果是IE6下的话，你就得加滤镜，就是在原有的CSS下再加一个单独让IE6识别的CSS！

我给你打个比方：

. Transparent {

width : 16px

height : 42px

background : transparent url(images/transparent.png) no-repeat

}

* html . Transparent {

background-color : transparent

background-image : none

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=“images/ transparent.png", sizingMethod="crop")

}

其中*html只有IE6能识别！IE7目前支持PNG图片透明效果了！IE8就更不用说了！

你先用着看看，实在不懂再联系我。

滤镜效果filter的css样式属性是微软Internet Explorer特有的，未被W3C收入，故而在火狐浏览器下尚未提供支持。但是通过js编码可以部分实现一些滤镜效果，如透明等。

随着浏览器的发展CSS的功能越来越强大，大多数的滤镜效果有类似功能的CSS样式实现了。

对应表：

IE 滤镜 　W3C 滤镜

Alpha：设置透明层次. grayscale 灰度

blur：创建高速度移动效果，即模糊效果. sepia 褐色

Chroma：制作专用颜色透明. 　 saturate 饱和度

DropShadow：创建对象的固定影子. hue-rotate 色相旋转

FlipH：创建水平镜像图片. 　invert 反色

FlipV：创建垂直镜像图片.　 opacity 透明度

glow：加光辉在附近对象的边外. brightness 亮度

gray：把图片灰度化.　 contrast 对比度

invert：反色.blur 模糊

light：创建光源在对象上. 　drop-shadow 阴影

mask：创建透明掩膜在对象上.

shadow：创建偏移固定影子.

wave：波纹效果.

Xray：使对象变的像被x光照射一样.