我正在为我的公司创建一个模板，该模板将在各种不同的客户网站上使用，并且它们都将具有不同的颜色。我为此模板创建了当前为黑色（或白色）的图标，我希望能够通过 css 控制这些图标的颜色。它们是一种简单的颜色，在 Photoshop 中，如果您进行颜色叠加的混合选项并选择一种颜色，它们看起来很棒。这是否可以在 css 中完成，因此当有人为未来的客户编辑此模板时，他们可以控制 css 中的图标颜色，而不必每次都在 Photoshop 中编辑每个图标？
【问题讨论】：
如果您的图标是您可以在 css 中制作的形状，它可以工作，但我之前从未听说有人做过您所说的事情。
【讨论】：
无法使用 css 更改图标的颜色。你可以塑造它，你可以给它透明度，不透明度等
【讨论】：
无法通过 CSS。您可以使用一些动态技术，例如 Canvas，但这不是一个好方法。我宁愿创建工具来创建所需颜色的图标集。您可以使用 PHP（phpGD 或 ImageMagick here is example of similiar problem）来完成。
【讨论】：
您可以对图像执行此操作（只要背景颜色一致），但它需要跳出框框思考一下。在 Photoshop（或类似软件）中打开图标的图像文件。编辑它，使“图标”部分（即当前为黑色的位）是透明的，而背景（即不是图标所描绘的位）填充为白色（或网站的背景颜色是什么） ）。本质上，您已经“反转了图像的极性”。将图片放到网页中，然后使用 CSS 指定它为background-color。您的图标应该以该颜色显示。 编辑： 类似这样的：http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/
[可能]更简单的方法是使用像http://pictos.cc/ 这样的图标字体。这只是文本，所以你可以像往常一样用 CSS 为它着色。
【讨论】：
可以在 CSS 中更改徽标的颜色，但不能解决您所说的问题。要制作可更改的徽标，您将制作一个具有透明度的 PNG，其中徽标所在的位置和（网页的）背景颜色位于负空间中。然后将它放在一个 P 或 div 上，该 P 或 div 具有您想要的徽标颜色作为其背景颜色。
问题是，您刚刚将灵活的徽标颜色替换为不灵活的“背景”颜色。
最好只包含白色和黑色两种颜色的徽标，作为所有网站的“包装”的一部分。只需在 CSS 中调用你想要的那个。
【讨论】：
您可以使用 CSS 伪元素和半透明覆盖来做到这一点。您可以按照此处的说明进行操作：http://www.impressivewebs.com/image-tint-blend-css/
如果您有 vector 徽标，则可以更轻松地使用 SVG 徽标（通过更改 SVG 颜色）。
【讨论】：
如果您将图标图像制作成字体，那么您可以通过 CSS 完全控制大小和颜色。查看非常流行的 Font-Awesome 字体，旨在赞美 Twitter Bootstrap。
我不是字体专家，但如果这种方法听起来很合适，您可以这样做：
【讨论】：
据我所知，它可以在 Firefox 和 Chrome 上运行良好。下面的例子。 http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS
img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
【讨论】：
我会说最好/最简单的答案是使用 SVG。徽标一开始应该是矢量格式，以便可以缩放而不会丢失从名片到广告牌的细节。
SVG“图像”基于形状。给要更改名称的形状命名，然后在 CSS 中对其进行寻址以更改其颜色。
这篇文章： http://css-tricks.com/using-svg/
还有这个例子： http://codepen.io/chriscoyier/pen/evcBu
出色地解释如何实现这一目标并展示其他可能性。
SVG 至少基础现在得到了广泛的支持，ie8 是唯一阻止它的浏览器，即使如此，也有办法通过将 SVG 渲染为动态图像来解决这个问题。
【讨论】：