Question

我正在开发一个应用程序，它将多个视图显示为表格（例如客户，产品等）。每行的最后一列包含按钮，用户可以使用这些按钮对特定行执行某些操作。简化示例：

<td class="actions">
  <a href="projects/some-project/edit">
    <img src="images/edit-project.png" alt="Edit project" />
  </a>
  <a href="projects/some-project/do-something">
    <img src="images/someaction.png" alt="Do something else with the project" />
  </a>
</td>

图像是透明的png。每张桌子的按钮数量可能会有所不同，现在总共大约有30个。

我被要求对应用程序css样式进行更改，因此不同的表现在可以有不同的颜色，例如，customers表现在有一些粗糙的色调，项目一个是蓝色等等。而且，“奇数”表格行的颜色与“偶数”表格略有不同。如果选中它们，行也会改变颜色。

问题是该设计指出按钮必须随行更改颜色。这需要制作许多按钮 - 颜色组合，并且将来会添加更多按钮。

我认为比分配设计师制作不同颜色的数百个按钮版本更好的方法是动态制作，具体取决于表类。我的问题是 - 最有效的方法是什么？该应用程序使用PHP作为服务器端语言和javascript与客户端jQuery。图像的问题在于它们不是单色的，而是使用多种颜色，所以我必须根据css类来操纵它们的HSL。

如果使用php更好的方法，我可能会使用ImageMagick。问题是获取与所提供的颜色非常接近的图像的最佳方法是什么。

Answer 1

我会使用jQuery并在png或png后面设置关于表的css类/ es的颜色。

不要像Imagemagick那样使用太多的PHP，因为它会大大减慢页面的渲染速度。

看看 Pixastic （coloradjust）
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/

或 PaintbrushJS （颜色色调）
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/

或 CamanJS （着色）
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

或 VintageJS
http://rendro.github.io/vintageJS/
https://github.com/rendro/vintageJS

Answer 2

你可以发布其中一张图片吗？因为如果它像你说的那样透明，你可以设置包含这些图像的a样式。

例如：

.actions > a {
    width: 40px;
    height: 20px;
    display: block;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
}

.actions > a.green {
    background-color: green;
    border-color: darkgreen;
}

.actions > a.orange {
    ...
}

等等。

Answer 3

我在我建立的一个网站上实现了一个非常相似的功能。我们允许用户从不同的布局（类似于你的html）中选择，以及多个颜色，图像等调色板。你肯定用jquery做到这一点：

在页面初始化时，您可以

$("head").append("<link>");

在某种变更事件（或重新加载数据）上。我的数据是通过ajax加载的

css = $("head").children(":last");  // or find your <link> that you'd replace
   css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: path_to_your_css
});

您可以通过这种方式更改您想要的任何内容，包括颜色和图像。

动态改变图像颜色

3 个答案: