SVG 作为超大网站背景答案

【问题标题】：SVG as Oversized Website BackgroundSVG 作为超大网站背景
【发布时间】：2011-01-17 21:22:29
【问题描述】：

我想建立一个 960 像素宽并左对齐的固定宽度网站。但是，我想使用宽于 960 像素的背景，并且如果用户的屏幕宽于 960 像素，它会填充右侧的空间。

这很容易使用背景图片：

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

但是我可以在背景是 SVG 的情况下做到这一点，而不出现水平滚动条吗？

【问题讨论】：

标签： css html scroll background svg

【解决方案1】：

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

http://emacsformacosx.com/

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我能想到的唯一可以关闭水平滚动条的方法是执行如下操作：

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

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

【讨论】：