colorpicker 不兼容IE6解决方案

最近做项目需要使用到让用户自定义颜色，Google了一把，居然网上已经有现成的jquery插件 colorpicker实现。

官方地址：http://www.eyecon.ro/colorpicker/

 

但是，在IE6下，当拖动滚动条滑动时，左侧的面板不能同步更新。

查看页面效果及源代码，发现作者的解决思路很是巧妙：使用http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png 作为背景图，然后将定位滚动条位置的颜色值取出后，算出RGB后，传给左侧区域，两个背景图一叠加，显示出来就是渐变的效果了。

 

但是ie6不支持多背景图，问题出现了。

 

这时，我们换个思路就可以解决了：通过ie6的滤镜，支持png透明，这时，再在上面添加颜色重叠。

修改colorpicker.css

 

第20行：

 

.colorpicker_color div {
 position: absolute;
 top: 0;
 left: 0;
 width: 150px;
 height: 150px;
 background: url(../images/colorpicker_overlay.png);
 _background-image: none;
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png", sizingMethod="scale");

}

 

ok，解决。 :)

 

个人认为，写colorpicker的童鞋一定是搞设计的，不然做不出来这样一张渐变的png图片，颜色一重叠就是想要的效果。看来程序员了解下色彩学还是很有必要的。HoHo~~