SVG作为CSS背景

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

<!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：但我不能让我的工作:( 它已经快把我逼疯了

感谢所有帮助

来源

2011-03-23 user169867

你能发布本页面的代码或演示吗？代码对我来说看起来很好（但我会添加引号'url（'foo'）'并将'background'改为'background-image'）。 – Blender 2011-03-23 18:11:00

不幸的是，我没有访问Web服务器。但我已经使用上面的CSS为PNG图像，它工作正常。 – user169867 2011-03-23 18:18:19

同意搅拌机。我怀疑URL中缺少的引号是什么让你咬。 – Rozwel 2011-03-23 18:20:20

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

这是什么修复了我。

1st我从VS 2010的内置web服务器切换到IIS Express。然后在我的网络配置我补充说：

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

现在一切工作正常。

来源

2011-03-23 20:15:22 user169867

谢谢！这正是我的问题。 – Pandincus 2011-06-26 04:43:43

为你做这项工作的jsfiddle。？

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

FWIW，我添加了一个背景大小，使其很好的“N大。

来源

2011-03-23 18:37:56 Matijs

是的。我开始认为这个问题实际上不是代码，而是w/Visual Studio 2010.我可以在本地或在线运行这些页面，但是如果我尝试在VS中运行它们，只有iframe可以工作......非常奇怪。 – user169867 2011-03-23 18:46:30

恐怕我对Visual Studio 2010一无所知。如果你在VS中运行它们，使用了什么浏览器？它是内置的东西吗？ – Matijs 2011-03-23 19:09:19

篇

举例有些文章：

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

来源

2011-03-23 18:53:22 tahdhaze09

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

后这里的深入研究是我如何解决了这一问题：

转到您的Joomla的根目录下安装和定位的.htaccess文件（或htaccess.txt如果它尚未安装）

现在，这些行添加到文件：

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

休息，使用标准的CSS和HTML属性，使您的SVG文件。

来源

2012-06-04 06:55:59 Hesen

SVG作为CSS背景

回答

相关问题