Question

我实际上不知道这种情况的具体名称（如果有），我的问题是这个; 我想在购物网站或官方汽车公司网站上建立一个类似网页的网页。

例如，你想购买一件T恤，它有颜色选项，当你点击颜色时，T恤图像会像所选颜色一样变化，或者在官方汽车公司网站上，汽车有颜色选项和你选择网站显示汽车颜色的颜色。

我做了类似这样的东西，但有4种颜色选项，我改变了它上面的颜色，它正在工作，但我有4种不同的图像，我需要像100种不同颜色一样。但我不能制作100个不同的图像，因为有什么方法可以解决这个问题吗？

我希望，我可以自己解释一下。

谢谢！

Answer 1

如果我正确理解了这个问题，你会问是否有办法以编程方式对Photoshop进行图像处理。我尝试了这个，我想我有一个解决方案。

首先你应该拍摄你的照片。然后使用photoshop或任何其他软件，使需要其颜色的对象变得透明。然后查看下面的代码并相应地进行调整。

JS：

function blue() {
    document.getElementById("div").style.backgroundColor = "blue";
}
function red() {
    document.getElementById("div").style.backgroundColor = "red";
}
function green() {
    document.getElementById("div").style.backgroundColor = "green";
}

HTML：

<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>
<button onclick="green()">Green</button>

<div id="div" style="z-index: 1; background-color: blue; width:550; height:718;"> //Insert the width and height of the picture
<img src="Picture1.png" style="z-index:2;"/> //Picture1 is the picture with the object
</div>

单击“红色”按钮时，div的背景颜色变为红色，并且因为您使对象的背景透明，所以对象应显示为红色。

View example on Codepen

如何制作一个网站页面，就像您选择颜色一样，项目的颜色会像所选颜色一样变化？

1 个答案: