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

html-css014

怎么通过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

}

举个列子:

有个div class是wrapBtn

<div class="wrapBtn ">aaa</div>

为了控制div的中字体是绿色,我写了个css

.wrapBtn {color:green}

然后我要把"aaa"做成一个链接

<div class="wrapBtn "><a href="http://www.163.com">aaa</a></div>

为了单独控制wrapBtn 中的a链接的字体颜色是黑色(仅限a链接中),我定义一个css

.wrapBtn a {color:#000}

再后我希望鼠标经过a链接字体aaa时,颜色边一下;

.wrapBtn a:hover {color:red}

就这么简单,还有一些楼上说的其他控制,用发一样