更改图像的颜色

Question

我需要更改网站上图片的颜色。图像是车库，因此纹理和阴影需要保持一致。如果我通过将图像与其他图像交换成不同颜色来改变颜色，我将需要大约7500张图像，我认为这不是最有效的方法，所以我问社区是否有是一个jQuery代码，允许我在白色车库的顶部放置某种颜色过滤器，并在网站上实时更改颜色？

这是我必须开始的一个图像的示例。

唯一可以改变颜色的是屋顶部分，图像中的金属轨道不能改变颜色，背景也不能改变颜色。

更新：我认为使用flash制作它会更容易。我知道汽车经销商网站也使用闪存。有谁知道任何关于flash的好教程？

Answer 1

你可以创建“无色”图像，就像支持透明度的PNG一样，然后在背景中有一个彩色的div或某些东西渗透？

Answer 2

您还可以使用php生成具有imagecopymerge功能的图像。这样可以节省在网址中设置彩色滤镜和图像的时间：

<img src="image.php?img=carport&color=blue" />

Answer 3

在图像上放置一个透明的div并相应地更改它的背景。 在下面的示例链接中，我使用jQuery在单击按钮时更改颜色。我使用了几个CSS透明属性，因此您可以获得跨浏览器解决方案。

跨浏览器兼容性的不透明度属性，包括IE6

.opacity{
    -khtml-opacity:.20;
    -moz-opacity:.20;
    -ms-filter:”alpha(opacity=20)”;
    filter:alpha(opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.2);
    opacity:.20;
}

jQuery代码，单击按钮时颜色发生变化。

$('#red, #green, #yellow, #blue').click(function(e) {
    var x = e.target.id;
    $('.filter').css({'background': x})
})

使用http://jsfiddle.net/gVQc3/4/

检查工作示例

Answer 4

给出如下的html：

<div id="gallery">
    <img src="http://farm2.static.flickr.com/1157/1054046043_82c48223f1.jpg" />
    <div id="overlay"></div>
</div>
<ul id="colors">
    <li>Red</li>
    <li>Green</li>
</ul>

CSS：

#gallery {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

#gallery img {
    border: 1px solid #ccc;
    padding: 0.4em;
}

#overlay {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 0.5em;
    background-color: transparent;
    opacity: 0.4;
}

#colors:before {
    content: "Select a color overlay: ";
}

#colors li {
    display: inline-block;
    margin: 0 0.5em 0 0;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    cursor: pointer;
}

和jQuery：

$('#colors li').hover(
    function(){
        var color = $(this).text();
        $('#overlay').css('background-color',color);
    },
    function(){
        $('#overlay').css('background-color','transparent');
    });

Leads to the following JS Fiddle example