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>);
}

但它不起作用，我不断出错。 expected a variable name (eg $x) or ')' for the parameter list for url

我想念什么？

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中的…字符似乎不合适。