使用CSS更改PNG图像的颜色

html-css017

使用CSS更改PNG图像的颜色,第1张

给定一个图像，如何使用CSS更改PNG图像的颜色？下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法，希望对大家有所帮助。 在CSS中使用Filter属性，利用滤镜功能来更改png图像颜色；CSS的Filter属性主要用于设置图像的视觉效果。 Filter属性存在许多属性值：示例1： 使用灰度滤镜将彩色图像更改为灰度图像 输出： 原始图像： 应用过滤器后：示例2： 此示例对图像使用许多过滤器。 效果图： 更多 web前端 知识，请查阅 HTML中文网 ！！

IE 6已经进入了淘汰期！虽然我国IE6仍占有很大的使用率！但是现在全部大型网站都已经把IE6放入淘汰阶段的产物了的！所以写的那些js只是为了兼容即将淘汰的IE 6的！而上面也写到了jpg、bmp不带透明通道；gif带透明通道，但是有杂边，效果不好；所以现在几乎全部的大型网站和前端网站已经跟紧潮流的网站几乎都是这样做的！

这种做法叫做css精灵，CSS Sprites，或者集合图片法。

原理：

原理就是把所有图片（前提是图片较小）都集合在一张图中，然后利用css样式中的background-position属性来准确定位到位置。

优点：

可以减少http请求，提高性能，本来四张图片要请求四次，现在一次搞定。

缺点：

就是处理起来比较麻烦，需要改动其中一个就要改整个图。

需要用ps先定位好每个图片的位置。

对html容器也有较高的要求，宽高都对背景会有依赖。

所以建议在比较稳定的页面，不需要经常改动的地方用css精灵的方法，如果需求经常变动，我觉得直接用单图也可以。