使用base64编码的svg图片作为CSS内容源

17

我想使用CSS内容和图像(base64),但是当我加载页面时,这些图像会显示为坏链接。

现在,我正在使用一个网站下载base64图像,并使用以下CSS使其显示成坏图片:

.default:after{
    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg0K1422f94715e8d9b67004ad32568deab3');
    position:absolute;
    width:100px;
    height:100px;
  }

如果我在新的 Chrome 选项卡中打开“损坏”的 base64 图像,将会出现以下错误:

此页面包含以下错误:

第10行第1列上的错误:文档结尾处有额外的内容。下面是页面到第一个错误的呈现。

现在,我从未使用过 base64 图像,但是否需要做一些特殊的事情还是只需复制并粘贴自动生成的代码?

提前感谢您的帮助。

**PS:我正在本地开发,不知道这是否可能是原因。


这是一个非常有用的转换器:https://codepen.io/jakob-e/pen/doMoML - emjay
2个回答

15

使用这个简单的bash命令,您可以轻松地将SVG文件转换为基于base64编码的值,以便在CSS背景属性中使用:

您可以使用此简单的bash命令将SVG文件转换为CSS背景属性的base64编码值:

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

在Mac OS X上进行了测试。 这样你也可以避免URL转义问题。

请记住,对SVG文件进行base64编码会增加其大小,请参见css-tricks.com博客文章


12

这就是字面意思,您已经对文档进行了编码+在末尾添加了一些垃圾。

通过http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/解码并删除垃圾,然后使用相同的网站进行编码,看起来应该是正确的编码。

XML version="1.0" encoding="utf-8"?>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接