CSS图像叠加

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

来源

2012-07-31 Tessa K

如果你的图标是一个你可以用css制作的图形，它可以工作，但我从来没有听说过任何人在做你之前正在谈论的内容。

来源

2012-07-31 17:00:39 dezman

它不可能使用css改变图标的颜色。你可以塑造它，你可以给透明度，不透明度等

来源

2012-07-31 17:03:22 Prashobh

不可能通过CSS。你可以使用像Canvas这样的动态技术，但这不是好的方法。我宁愿创建工具来创建所需颜色的图标集。你可以用PHP（phpGD或ImageMagick here is example of similiar problem）来完成。

来源

2012-07-31 17:22:43 ogur

你可以用图像来做到这一点（只要背景颜色一致），但它需要在盒子外面思考一下。在Photoshop中打开图标的图像文件（或类似文件）。编辑它以便“图标”部分（即当前黑色的位）是透明的，并且背景（即不是图标所描绘的位）填充为白色（或任何背景颜色为）。基本上你已经“颠倒了图像的极性”。将图片放入网页中，然后使用CSS指定它为background-color。你的图标应该以这种颜色出现。 编辑：事情是这样的：http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/

A [潜在]更简单的方法是使用一个图标字体像http://pictos.cc/。这只是文字，所以你可以像往常一样用CSS来着色。

来源

2012-07-31 17:25:00

可以在CSS中更改徽标的颜色，但不能解决您正在讨论的问题。要制作一个可更改的徽标，您需要制作一个带有透明度的PNG，其中徽标是和负面空间中的（网页的）背景颜色。然后将其放在具有所需徽标颜色的P或div作为背景颜色。

麻烦的是，您刚刚交换了一个灵活的标志颜色为不灵活的“背景”颜色。

更好的是只包含标志，白色和黑色的颜色，作为所有网站所提供的“包装”的一部分。只需在CSS中调用你想要的那个。

来源

2012-11-02 20:30:24 wes

你可以用CSS伪元素和半透明叠加层来做到这一点。您可以按照下列指示：http://www.impressivewebs.com/image-tint-blend-css/

如果你有矢量标志，您可以用SVG标志更容易做到这一点（通过改变你的SVG的颜色）。

来源

2012-11-11 01:54:23 Plynx

如果您将图标图像变为字体，那么您可以通过CSS完全控制尺寸和颜色。查看非常流行的Font-Awesome字体，旨在恭维Twitter Bootstrap。

我不是字体的专家，但如果这种做法听起来像一个合适的，你会做这样的事情：

从你的图标创建矢量图形
它们加载到一个字体编辑器，像FontLab Studio
将新字体添加到您最喜欢的Web应用程序中。如果你需要这个指导，FontSquirrel.com会生成很棒的@ font-face标记来包含他们的免费字体库。

来源

2012-12-07 14:11:21 Anson

据我所知，它可以完成并且可以很好地与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-16 00:20:08 MARCUS

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

SVG'图像'基于形状。给出想要更改名称的形状，然后在CSS中对其进行处理以更改其颜色。

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

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

做解释如何做到这一点，还炫耀其他可能性了出色的工作。

SVG至少基础知识现在得到了广泛的支持，ie8是唯一支持它的浏览器，即便如此，通过将SVG作为图像随时渲染也可以解决这个问题。

来源

2013-06-19 00:20:21 Thurstan