html - 使用 css 更改背景图像的颜色

Question

我有一个我想在我的应用程序中使用的图标库。这些主要是字形图标，但还有一些其他的。我希望 html 看起来与为字形图标定义的相同，即

<a href="#">
    <span class="glyphicon glyphicon-wrench"></span>
    Normal Link
</a>

<a href="#">
    <span class="glyphicon blue .glyphicon-wrench"></span>
    Blue Link
</a>

我意识到 glphicons 实际上是一种字体，通常不是图像，但由于我无法控制的要求，我不能依赖正在安装/可用的字体；所以我必须改用背景图片。

CSS：

.glyphicon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    content: "";
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.glyphicon .glyphicon-wrench: {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-440-wrench.png');
}

.glyphicon .glyphicon-envelope {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-11-envelope.png');
}

.glyphicon .glyphicon-info-sign {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-196-info-sign.png');
}

.glyphicon .glyphicon-danger {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-197-exclamation-sign.png');
}

这个问题是我需要图标在不同的地方有不同的颜色。所以我希望“.blue”类和“.white”类相应地改变图像颜色。现在我通过创建一个使用图像编辑器来创建不同颜色的图像并为每种颜色设置一个部分来做到这一点：

.glyphicon .blue .glyphicon-wrench: {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-440-wrench-blue.png');
}

.glyphicon .blue .glyphicon-envelope {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-11-envelope-blue.png');
}

.glyphicon .blue .glyphicon-info-sign {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-196-info-sign-blue.png');
}

.glyphicon .blue .glyphicon-danger {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-197-exclamation-sign-blue.png');
}

我真的不喜欢创建所有这些额外的图像并为每种颜色重复自己。有没有一种方法可以将过滤器应用于 html 元素的背景图像，例如...

.glyphicon .blue {
     background-filter: RGB(0,0,1);
}

笔记

我知道可以将过滤器应用于 IMG 标签，我需要能够将一个过滤器应用于background-image。这些图标也有透明背景，需要保持透明......所以我需要一个只影响图像前景的过滤器。

提前致谢，

标签： htmlcss

Answer 1

如果您不能使用字体，请尝试在您的 html 顶部内联 SVG 精灵。

隐藏 SVG 精灵本身，但您可以稍后在 html 中通过元素的唯一 id 引用精灵的每个图标。<use>

使用设置fillSVG 中的颜色fill="currentColor"，您可以color使用 CSS 添加到任何父节点以控制每个图标实例的颜色。

#svgSprite {
  display: none
}

.blue {
  color: blue;
}

.red {
  color: red;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.blue:hover {
  color: navy;
}

.red:hover {
  color: maroon
}

.green:hover {
  color: DarkGreen;
}

.yellow:hover {
  color: DarkOliveGreen;
}

<svg id="svgSprite" viewBox="0 0 122 122">
<g id="checkbox">
<rect x="3.5" y="3.5" width="115" height="115"  stroke="black" stroke-width="5" fill="none"/>
<path d="M57 110L15 62L57 85L107 14L57 110Z" fill="currentColor"/>
</g>
</svg>


<div class="icon blue"><svg><use href="#checkbox"/></svg></div>
<div class="icon red"><svg><use href="#checkbox"/></svg></div>
<div class="icon green"><svg><use href="#checkbox"/></svg></div>
<div class="icon yellow"><svg><use href="#checkbox"/></svg></div>