0

我正在为我的公司创建一个模板，该模板将在各种不同的客户网站上使用，并且它们的颜色都不同。我为此模板创建了当前为黑色（或白色）的图标，我希望能够通过 css 控制这些图标的颜色。它们是一种简单的颜色，在 Photoshop 中，如果您进行颜色叠加的混合选项并选择一种颜色，它们看起来很棒。这是否可以在 css 中完成，因此当有人为未来的客户编辑此模板时，他们可以控制 css 中的图标颜色，而不必每次都在 Photoshop 中编辑每个图标？

4

9 回答 9

1

可以在 CSS 中更改徽标的颜色，但不能解决您所说的问题。要制作可更改的徽标，您将制作一个具有透明度的 PNG，其中徽标所在的位置和（网页的）背景颜色位于负空间中。然后将它放在一个 P 或 div 上，该 P 或 div 具有您想要的徽标颜色作为其背景颜色。

麻烦的是，您刚刚将灵活的徽标颜色换成了不灵活的“背景”颜色。

最好只包括标志的两种颜色，白色和黑色，作为所有网站的“包装”的一部分。只需在您想要的 CSS 中调用您想要的那个。

于 2012-11-02T20:30:24.327 回答
0

我想说最好/最简单的答案是使用 SVG。徽标应该以矢量格式开始，以便可以缩放而不会丢失从名片到广告牌的细节。

SVG“图像”基于形状。给要更改名称的形状，然后在 CSS 中对其进行寻址以更改其颜色。

本文： http ://css-tricks.com/using-svg/

这个例子： http ://codepen.io/chriscoyier/pen/evcBu

出色地解释如何实现这一目标并展示其他可能性。

SVG 至少基础现在得到了广泛的支持，ie8 是唯一阻止它的浏览器，即使如此，也有办法通过将 SVG 渲染为动态图像来解决这个问题。

于 2013-06-19T00:20:21.123 回答
0

据我所知，它可以与 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%);
}
于 2013-01-16T00:20:08.390 回答
0

无法使用 css 更改图标的颜色。你可以塑造它，你可以赋予透明度，不透明度等

于 2012-07-31T17:03:22.353 回答
0

不可能通过 CSS。您可以使用一些动态技术，例如 Canvas，但这不是一个好方法。我宁愿创建工具来创建所需颜色的图标集。您可以使用 PHP 来完成（这里的 phpGD 或 ImageMagick 是类似问题的示例）。

于 2012-07-31T17:22:43.277 回答
0

你可以用图像来做到这一点（只要背景颜色是一致的），但它需要跳出框框思考一下。在 Photoshop（或类似软件）中打开图标的图像文件。编辑它，使“图标”部分（即当前为黑色的位）是透明的，而背景（即不是图标所描绘的位）填充为白色（或网站的背景颜色是什么） ）。本质上，您已经“反转了图像的极性”。将图片放在网页中，然后使用 CSS 指定它的background-color. 您的图标应该以该颜色显示。编辑：像这样的东西： http: //coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/

[可能] 更简单的方法是使用像http://pictos.cc/这样的图标字体。这实际上只是文本，因此您可以像往常一样使用 CSS 对其进行着色。

于 2012-07-31T17:25:00.037 回答
0

您可以使用 CSS 伪元素和半透明覆盖来做到这一点。您可以按照此处的说明进行操作：http ://www.impressivewebs.com/image-tint-blend-css/

如果您有矢量徽标，您可以更轻松地使用 SVG 徽标（通过更改 SVG 颜色）。

于 2012-11-11T01:54:23.360 回答
0

如果您将图标图像制作成字体，那么您可以通过 CSS 完全控制大小和颜色。查看非常流行的Font-Awesome字体，旨在补充Twitter Bootstrap。

我不是字体专家，但如果这种方法听起来很合适，您将执行以下操作：

  • 从您的图标创建矢量图形
  • 将它们加载到字体编辑器中，例如FontLab Studio
  • 将新字体添加到您最喜欢的 Web 应用程序中。如果您需要这方面的指南，FontSquirrel.com 会生成很棒的 @font-face 标记以包含他们的免费字体库。
于 2012-12-07T14:11:21.053 回答
0

如果您的图标是您可以在 css 中制作的形状，它可以工作，但我从未听说有人做过您所说的事情。

于 2012-07-31T17:00:39.133 回答