css - 背景图像中的 SVG

Question

我有这个 SASS:

.menu-inner .item-block .item-inner{
    border: none;
    background-image: url(data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>);
}

但它不起作用，我不断收到错误消息。 url 的参数列表需要一个变量名(例如 $x)或 ')'

我错过了什么？

Answer 1

SASS 试图将您的 SVG 解释为 CSS/SASS。您应该在 url 周围加上引号争论。由于 SVG 源代码中有单引号，因此在参数周围使用双引号。

.menu-inner .item-block .item-inner{
    border: none;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>");
}

顺便说一句，您的 SVG 中的 ... 字符似乎不合适。