为什么 SVG 不通过 css background-image 显示答案

【问题标题】：Why isn't SVG showing by css background-image为什么 SVG 不通过 css background-image 显示
【发布时间】：2013-02-17 08:29:12
【问题描述】：

当我使用

<img src="../images/jte.svg" alt="Logo">

但是，当我尝试使用以下内容通过 css 显示时：

html

<div class="logo2">
</div>

css

.logo2 {
background-image: url(jte.svg);
}

什么都没有显示。知道为什么会这样吗？我尝试了多种不同的路径选项“（'../images/jte.svg'）（'jte.svg）无济于事。

【问题讨论】：

你有没有给 DIV 尺寸？空的 DIV 不会单独显示在页面上，除非您为它们定义尺寸。
好的，所以给出尺寸确实会显示图像。但是，图像没有显示完整的东西......
检查 SVG 的尺寸。
啊……就是这样。在 Illustrator 中调整大小和导出的任何建议？
浏览器使用 SVG 本身指定的大小，类似于它处理普通图像的方式。如果你的容器是 100px 高，但你的 SVG 是 200px，那么只有一半会显示。如果要调整大小，则必须使用background-size 属性：developer.mozilla.org/en-US/docs/CSS/background-size

【解决方案1】：

为相关元素使用定义的宽度和高度，或者简单地将其附加到正文。例如：

body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')

【讨论】：