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背景

回答

相關問題