更改图像的颜色答案

【问题标题】：Changing the color of an image更改图像的颜色
【发布时间】：2011-03-10 00:33:22
【问题描述】：

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

这是我必须开始使用的其中一张图片的示例。

唯一可以变色的是车顶部分，图片中的金属栏杆不能变色，背景也不能变色。

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

【问题讨论】：

用部分透明的 div、背景颜色和不透明度覆盖它怎么样？
创建一个 Flash 应用而不是 jquery 或 javascript 怎么样？
请不要在没有检查的情况下麻烦。我有一个例子来说明我的意思。基本上，您拍摄车棚图像并使用 GIMP 执行以下操作：将颜色转换为 Alpha 通道 - 这会“渗出”白色并在车棚内留下半透明区域。然后将其周围的背景更改为纯白色。然后你在它后面的潜水中的任何颜色都会渗入，你只需改变 div。 Your carport here

标签： javascript jquery css flash colors

【解决方案1】：

您能否将“无色”图像创建为支持透明度的 PNG，然后在背景中有彩色 div 或其他东西？

【讨论】：

但是如何在不影响图片周围背景的情况下改变背景图片呢？
给覆盖的 div 一个背景图像，它在“背景”区域是完全透明的，并且在您的对象所在的位置具有半透明的颜色。这仍然意味着为每种颜色制作单独的图像，但是一旦有了蒙版，自动完成就很容易了。

【解决方案2】：

您也可以使用 php 生成图像，使用 imagecopymerge 函数。能够在 url 中设置颜色过滤器和图像会节省时间：

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

【讨论】：

您的示例和源链接已损坏，因此使此答案无用。

【解决方案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/

【讨论】：

【解决方案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.

【讨论】：