SVG作爲超大網站背景

Question

我想建立一個固定寬度的網站，其寬度爲960像素，並向左對齊。不過，如果用戶的屏幕寬度超過960像素，我想要使用寬度超過960像素的背景，並將空間填充到右側。

這是很容易使用的背景圖片：

body {background:url(myreallywidebgimage.png) 0 0 no-repeat} 
#wrapper {width:960px;} 

但我能做到這一點，其中的背景是SVG，但不出現水平滾動條？

Answer 1

我能想到的唯一的事情就是關閉水平滾動條是做類似如下：

#wrapper {width:960px; overflow-x:hidden} 

編輯：經過進一步的思考，我決定這是最好看的，如果谷歌提供提出了其他可能的建議，我碰到這個：http://helephant.com/2009/08/svg-images-as-css-backgrounds/。上述解決方案只在將背景分配給該div元素時才起作用。但是，您可以嘗試將overflow-x：hidden分配給主體，以查看是否也解決了問題。希望這些建議有所幫助。

Answer 2

僅當SVG圖像的像素尺寸超過瀏覽器窗口的像素尺寸時，背景纔會滾動。如果您將圖像設置爲100％寬度和100％高度，則背景不應滾動。

Answer 3

看看這個網站。他們基本上正在做你想做的事。他們有一個SVG漸變作爲背景。在調整瀏覽器大小時，漸變將調整爲填充整個窗口。

http://emacsformacosx.com/

他們也有在頁面上很多其他SVG的，但背景漸變是你所需要的。