有没有办法用 CSS3 为 div 的背景图像着色？答案

【问题标题】：Is there a way to colorize a div's background image with CSS3?有没有办法用 CSS3 为 div 的背景图像着色？
【发布时间】：2015-04-23 14:36:40
【问题描述】：

我正在为我的应用程序中的图标使用一个大的 png 精灵。这些图标都是灰色的，由透明背景组成。有没有办法可以用 CSS 为它们着色？我尝试了 webkit 过滤器，但这似乎只适用于 img。

HTML

<div class="icon iconPencil"></div>

CSS

.icon {float:left;width:16px;height:16px;background: url('../../images/interface/icons_x2.png') no-repeat 0 0;background-size: 1424px 1424px;}
.icon.iconPencil {background-position:-96px -32px;}

在上面的例子中，我想给齿轮图标着色，它是我的精灵的一部分，并且有一个透明的背景。

【问题讨论】：

标签： html css

【解决方案1】：

如果您想使用图像，那么我会指出 Sutherland 关于 svgs 使用 css 技巧的答案。如果你想使用字体图标，那么我会使用 http://fortawesome.github.io/Font-Awesome/icons/ 。您所要做的就是将他们的链接复制并粘贴到您的脑海中，然后您就可以使用他们的图标列表。您可以像更改网站上的文字一样更改每个图标的颜色。

将链接添加到 html 页面头部后的样式示例：

/* CSS */

i.fa-cog {
color:#333;
}

<!-- HTML -->

<i class="fa fa-cog"></i>

我在几个项目中使用了很棒的字体图标，非常棒。

【讨论】：

我喜欢这个。我在几秒钟内就安装好了。

【解决方案2】：

你不能用 png 来做到这一点，你需要使用 svg 来代替 https://css-tricks.com/svg-sprites-use-better-icon-fonts/

【讨论】：

【解决方案3】：

不可能达到你想要的。最好使用下面的 css 和字体工具包。这个库非常易于使用，并且会不断更新新图标。

http://fontawesome.io/

<i class="fa fa-cog" style="color: red"></i> My Cog

这是一个JSFidde-

http://jsfiddle.net/costh/nuLvr4ue/

【讨论】：

【解决方案4】：

正如海登和查理所说，最好的办法是使用图标字体。但这不限于字体真棒，你可以使用任何 Unicode

div:before {
    content: '\2605';
    color: red;
}

&lt;div&gt;text&lt;/div&gt;

您可以查找 unicode 字符 here

【讨论】：