SVG背景图片 [英] SVG in background-image

问题描述

我正在使用此SASS:

I am having this 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 (e.g. $x) or ')' for the parameter list for url

But it is not working I keep getting error. expected a variable name (e.g. $x) or ')' for the parameter list for url

我想念什么?

推荐答案

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

SASS is trying to interpret your SVG as CSS/SASS. You should put quotes around the url argument. Since there are single quotes in the SVG source, use double quotes around the argument.

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

As an aside, the … character in your SVG seems out of place.

这篇关于SVG背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！