2

我正在设计一个具有固定重复背景的网站，但无法弄清楚为什么它有一个问题。

如果您在小窗口中加载站点，然后向右滚动，则背景不会继续，而是显示背景颜色。

有任何想法吗？

网站是： http: //new.focalpix.co.uk/

背景的CSS是：

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
4

3 回答 3

4

试试下面的 CSS：

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

看起来（在 Opera 和 Chrome 中）浏览器将浏览器初始视口之外的区域视为 HTML 标记的一部分，而不是 BODY 的一部分。您可以通过将背景图像放在 HTML 而不是 BODY 标记上来验证这一点 - 然后查看它如何仅出现在文档的滚动查看区域中。我不知道为什么会这样——有人吗？

不过，上面的 CSS 似乎可以解决问题。

于 2009-01-11T12:17:47.103 回答
0

您已经在 style.css 第 13 行定义了 body background: url，但还在第 17 行开始的规则中定义了 body background 的规则。

第 17 行的规则适用于 body、html，但从第 11 行开始的规则仅适用于 body。您可能可以将这些浓缩为一个规则，准确定义您想要的背景——颜色或来自 url 的图像

于 2009-01-11T12:01:38.943 回答
0

这是因为<body>标签默认设置为浏览器窗口宽度的 100%，而不是网站。这意味着当窗口的宽度小于 960 像素（您的站点的宽度）时，主体块结束。要解决此问题，只需设置：

body {min-width: 960px}

不幸的是，如果没有名为minmax的 JavaScript hack，min-width 在旧版本的 Internet Explorer 中不起作用。我建议将它的 javascript 嵌入代码包含在一些条件注释中，以防止在新浏览器中出现不必要的 HTTP 请求和潜在的兼容性错误。所以像这样嵌入 minmax ：

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

此外，一般提示 - 这些问题很容易通过玩firebug来解决。

于 2009-01-11T12:20:47.750 回答