使用六边形颜色代码作为背景图像的描边，而不是RGBA

Question

我在为背景图像分配颜色时面临1个问题。基本的背景图片是汉堡包菜单。

如果我指定颜色为RGBA格式，那么它在开发环境中工作得很好。但是当我构建应用程序时，它会自动将颜色代码更改为Hexa格式。

我试着直接分配六边形颜色代码，但它不起作用。谁能提出一个解决办法呢?

#keyword div {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(4,71,87,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

<figure id="keyword">
<div></div>
</figure>

我想要的是分配stroke='##044757'而不是stroke='rgba(4,71,87,1)'

小提琴手示例

Answer 1

在url中保留字符#作为片段标识符的开始。您必须将其编码为%23才能使URL有效。

中风= % 23044757的

Answer 2

'#'需要url编码，因此它成为stroke='%23044757'，其中%23是'#'的代码。
同样在你的小提琴没有显示，甚至在第一个例子与rgba，因为你忘记设置宽度的数字。

Answer 3

您可以使用十六进制值保存svg文件并将其加载为外部文件:

background-image: url(your-svg.svg);

或内联:

#keyword div {
width: 100px;
height: 100px;
}
#keyword svg {
width: 100%;
}

<figure id="keyword">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path stroke="#125478" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 8h24M4 16h24M4 24h24"/></svg>
</div>
</figure>

或使用您的方法将'#'替换为'%23'用于编码目的:

#keyword div {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23125468' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}
html {
font: 1em/1.5 sans-serif;
}
figure {
padding: 0
}
figcaption {
margin-top: 0.5em;
max-width: 80ch
}
figure>div {
width: 100%;
height: 4em;
background-repeat: no-repeat
}
* {
box-sizing: border-box
}

<figure id="keyword">
<div></div>

</figure>