怎么通过css滤镜将图片分四块设置不同颜色

如何通过css滤镜将图片分四块设置不同颜色？
比如图片：


想变成：

------解决思路----------------------
首先浏览器类型太多
要前端实现 换图片颜色 难啊

其次这个东西 应该是 后台实现 比较合理


------解决思路----------------------
css js不知道！　php倒是可以！　　用GD库的函数！　　把图片像素以点阵的方式取出来，然后把黑色分别转换成你想要的颜色！
------解决思路----------------------
如果你一开始就产生码纹透明的图片（这在服务端是小菜一碟）那就简单多了
------解决思路----------------------
之前见到这题目第一思路是 之前刚看HTML5的书时将的canvas， 把图片放canvas里，然后逐个的像素进行处理，然后生成一张新图