Html 未显示使用SVG的关闭图标

我试图使用svg显示关闭图标，但它没有显示任何内容 谁能帮我弄到这个吗。这看起来很简单，但我不明白为什么它不起作用

SCSS：

。关闭{
背景图像：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景尺寸：包含；
位置：绝对位置；
光标：指针；
左侧填充：5px；
}

html

---

您需要定义宽度和高度

更新：

svg的fill属性包含一个哈希符号

#

，需要用

%23

替换该符号才能工作

详情如下：

---

代码片段：

。关闭{
背景图像：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景尺寸：包含；
位置：绝对位置；
光标：指针；
左侧填充：5px；
宽度：50px；
高度：50px；
}

---

您需要定义宽度和高度

更新：

svg的fill属性包含一个哈希符号

#

，需要用

%23

替换该符号才能工作

详情如下：

---

代码片段：

。关闭{
背景图像：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景尺寸：包含；
位置：绝对位置；
光标：指针；
左侧填充：5px；
宽度：50px；
高度：50px；
}

---

不，它不起作用。你能提供一个演示，在那里可以重现问题吗？另外，确保类为close的div的父级具有CSS属性

position:relative哦，我看到图标在那里，但它非常小！请注意，您还需要对特殊字符进行编码（例如FF中的
#
和IE不同版本中的其他字符，最安全的方法是通过
encodeURIComponent（）
传递所有标记）。目前，该代码段在FF中不起作用，因为它不起作用。不，它不起作用。你能提供一个可以重现问题的演示吗？另外，确保类为close的div的父级具有CSS属性
position:relative哦，我看到图标在那里，但它非常小！请注意，您还需要对特殊字符进行编码（例如FF中的
#
和IE不同版本中的其他字符，最安全的方法是通过
encodeURIComponent（）
传递所有标记）。目前，由于这个原因，该代码段在FF中不起作用。
.close {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='#666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    cursor: pointer;
    padding-left: 5px;
  }

  <div class='close'></div>