SVG 作为 CSS 背景答案

【问题标题】：SVG as a CSS backgroundSVG 作为 CSS 背景
【发布时间】：2012-10-21 21:31:22
【问题描述】：

我一直在尝试让一个简单的 SVG 矩形作为 IE9 或 FF4 中的背景，但都不适合我。这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:99px;background-image: url('bar.svg')"></div>
<iframe src="bar.svg" height="99px"></iframe>
</body>
</html>

iframe 显示图形，但 div 不显示。有什么想法我可能会出错吗？

我找到了一个工作示例here：但我自己不能让它工作:( 这让我快疯了。

感谢您的帮助。

【问题讨论】：

你能发布代码或这个页面的演示吗？代码对我来说看起来不错（但我会添加引号 url('foo') 并将 background 更改为 background-image）。
很遗憾，我无法访问 Web 服务器。但我已将上述 css 用于 png 图像，并且效果很好。
同意搅拌机。我怀疑 URL 周围缺少的引号是什么在咬你。
我已经按照建议修改了样式，但结果是一样的。
@Rozwel, @Blender：url 访问器不需要引号。这个网站给出了一个使用 SVG 图像作为 CSS 背景的例子：alistapart.com/d/…

标签： html css svg

【解决方案1】：

感谢大家的帮助。这实际上是一个 Web 服务器问题，其中为 SVG 提供了错误的 MIME 类型，导致浏览器无法正确呈现。

这是为我解决的问题。

第一次我从 VS 2010 的内置 Web 服务器切换到 IIS Express。然后在我的网络配置中我添加了：

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
</system.webServer>

现在一切正常。

【讨论】：

谢谢！这正是我的问题。

【解决方案2】：

我在 Joomla 中遇到了同样的问题！ 2.5 在 Godaddy Linux 服务器上运行。

经过深入研究，这是我解决问题的方法：

转到您的 Joomla 安装的根目录并找到 .htaccess 文件（或 htaccess.txt 如果尚未设置）

现在将这些行添加到文件中：

AddType image/svg+xml svg
AddType image/svg+xml svgz

休息一下，使用标准的 CSS 和 HTML 属性来呈现您的 SVG 文件。

【讨论】：

【解决方案3】：

这个 jsfiddle 对你有用吗？

http://jsfiddle.net/B3mnk/embedded/result/

fwiw，我添加了一个背景尺寸，让它看起来不错。

【讨论】：

是的。我开始认为问题实际上不在于代码，而在于使用 Visual Studio 2010。我可以在本地或在线运行页面，但如果我尝试在 VS 中运行它们，只有 iframe 可以工作......非常奇怪。
恐怕我对Visual Studio 2010一无所知。如果你在VS中运行它们，使用的是什么浏览器？它是内置的吗？

【解决方案4】：

一些带有例子的文章：

https://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml

http://helephant.com/2009/08/svg-images-as-css-backgrounds/

https://developer.mozilla.org/en/svg_in_html_introduction

http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ - 这个在文章底部附近有一个后备到 .png。

报告为 Firefox 中的错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=231179

【讨论】：