Question

我正在尝试更改png的颜色。

例如，如果我有一个png的袜子，并且有5种不同的材质选择。我将如何编程，单击选择的材料后，袜子的背景就会发生变化以匹配材料？

Answer 1

这不是最好的PHP或HTML问题，它更适合作为javascript / jQuery问题。原因是HTML和PHP都无法检测到用户对任何内容的点击。呈现DOM之后，PHP完成，并且HTML是一种标记语言，而不是编程语言。 （您当然可以使用表格来完成此操作-但这就像只用一把小螺丝刀盖房子。）

那么，该怎么做？

您的袜子png应当设计成，当它覆盖在不同颜色的背景上时，袜子会显得是不同的颜色。这是您将要用Photoshop或GIMP等执行的操作。 >
您将使用一些javascript代码/逻辑来检测单击了哪个按钮，并从其ID或class属性获取值，然后应用适当的背景。

演示：

$('button').click(function(){
  let clr = this.id.split('_')[1]; //e.g. red
  $('#sock').removeClass();
  $('#sock').addClass('bg_' + clr);
});

#sock{width:100px;height:50px;border:1px solid #ddd;}
#btnDIV{margin-top:15px;}
  button{display:inline-block;margin-right:15px;}

.bg_red{background:tomato;}
.bg_blue{background:lightblue;}
.bg_green{background:palegreen;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="sock"></div>
<div id="btnDIV">
  <button id="btn_blue">Blue</button>
  <button id="btn_red">Red</button>
  <button id="btn_green">Green</button>
</div>

^{顺便说一句，此答案无疑会被其他用户否决，但这不是因为它不起作用。出于某些可能的原因，它会被否决：（a）当您特别要求PHP解决方案时，我建议使用javascript解决方案；（b）您的问题过于笼统，因此没有人可以回答（您不同意，我不同意）；（c）每个人都有特权投票，大多数用户行使该特权。它不是私人的，不会影响答案的有效性。如果答案适合您，请使用它。}

如何：更改png图像的背景以匹配一块布的样本？

1 个答案: