5

我正在为 CMS 构建一些基本的 HTML 代码。CMS 中与页面相关的选项之一是“背景图像”和“将页面宽度/高度拉伸到背景图像宽度/高度”。因此，对于大背景图像，整个事情变得可见。

我当前的屏幕分辨率是 1280 x 1024。

如果我执行以下操作：

  • 指定一个 1400 像素宽的背景图片
  • 将“位置”指定为“中心中心”（水平/垂直）
  • 指定“将页面宽度拉伸到背景图像宽度”

然后在FF中，会发生以下情况：

  • 页面正确拉伸到 1400 像素。我得到一个水平滚动条，因为我的屏幕比那个小。到现在为止还挺好。
  • 现在奇怪的是：背景图像不是相对于 1400px 居中的，因此显示的是完整图像，而是相对于我的 1280px 视口，将图像的一部分隐藏在屏幕左边缘之外，并留下一条白色条纹而不是显示整个图像。
  • 没有可以操纵任何东西的其他元素（DIV、包装器...）。所有设置都直接在正文中。

更新： IE 正确地做到了。谷歌浏览器也有同样的问题。

就好像 Firefox 首先以 100% 的宽度渲染背景图像，将其居中，然后注意到主体需要拉伸到 1400 像素。

这是正常的 Firefox 行为吗？有什么想法我能做什么？

发布一个链接会有点麻烦，因为它都是在一个封闭的开发环境中，但如果一切都失败了，我会把一些东西放在一起看看。

CSS：

body 
 {
 background-image: url(http://www.domain.com....image.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 min-width: 1400px;
 height: 100%;
 }
4

3 回答 3

3

您被 CSS 规范的一个怪癖所困扰：多亏了第 14.2 节，您应用于body元素的任何背景图像都会变成背景html。（这是为了让作者可以继续在 body 标签上使用背景，他们希望它来自 CSS 之前的浏览器。）

在 IE 中，html表示整个文档画布并展开以适应放大的正文宽度。在其他浏览器中，它的行为与任何其他display: block元素一样，并且无论您在其中放入什么，都保持视口宽度。其他浏览器在这里可以说更正确，但 CSS 规范在这个主题上并不是很清楚，结果是 IE 中的结果更接近于 14.2 关于画布的措辞。无论哪种方式，它都不是真正指定的可靠行为。

您可以通过将宽度和背景设置为 onhtml而不是body. （记得在 IE 中使用标准模式。）

但是一个1400px固定宽度的文档？听起来真是个坏主意。

于 2009-11-09T15:14:32.870 回答
1

尝试添加：

width: 100%;
display: table;

到body标签样式（也background-attachment: fixed;可能需要）

于 2009-11-09T15:01:29.963 回答
0

背景位置应该是左上角；你设置了吗

body{
margin:0;
padding:0;
}
于 2009-11-09T14:40:57.580 回答