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}

修改：经过进一步反思，我决定最好看看Google是否提出了其他可能的建议，我发现了这一点：http://helephant.com/2009/08/svg-images-as-css-backgrounds/。只有将背景分配给该div元素时，上述解决方案才有效。但是，您可以尝试将overflow-x：hidden分配给body本身，以查看是否也解决了问题。希望这些建议有所帮助。

Answer 2

仅当SVG图像的像素尺寸超过浏览器窗口的尺寸时，背景才会滚动。如果将图像设置为100％宽度和100％高度，则背景不应滚动。

Answer 3

看看这个网站。他们基本上做你想做的事。他们有一个SVG渐变作为背景。在调整浏览器大小时，渐变会调整以填充整个窗口。

http://emacsformacosx.com/

页面上还有很多其他SVG，但背景渐变就是你所需要的。