数据 URI：更改颜色和定义内容区域

Question

我在 Flaticon.com 上找到了 some icons，可以在我博客的导航菜单中使用它们。在这种情况下，我想使用 Base64 代码将文本 "Home" 替换为房屋图标。

这是我网站上使用的当前代码：

.menu-item-36 {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNC…ToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYII5467651096249186f76b4680bd54615d');
  margin-left: 10px;
  height: 40px;
}

我把background-image改成content是为了隐藏原文'Home'，换成图标

现在的问题是：当我使用上面的代码时，图标是黑色的。我想改用白色。当我将 class 设置为 color: #fff; 或 fill: #fff; 时，它不起作用。

这个问题我怎么办？

Answer 1

要隐藏文本，您不应将背景 css 属性更改为内容。我不知道你是否应该将内容用于除 ::before 和 ::after 伪元素之外的任何其他内容。

但是对于你的问题：

要隐藏文本，您应该使用此答案中给出的一种可能性：

为了使您的图像变白，有一个 hacky 解决方案，即使用此 css:

-webkit-filter: invert(100%);
        filter: invert(100%);

但最好是下载图像并将其编辑为白色。然后获取 base64 代码，例如 http://www.base64-image.de/

最后，当您将该图像设置为背景图像时，以下 css 将非常适合您的菜单：

background-size: contain;
background-position: center;

数据 URI：更改颜色和定义内容区域

Data URI: Changing color & defining content area

css

svg

data-uri