如何：背景大小：100% 自动，背景附件：滚动答案

【问题标题】：How to: background-size: 100% auto, background-attachment: scroll如何：背景大小：100% 自动，背景附件：滚动
【发布时间】：2013-03-24 02:18:45
【问题描述】：

Firefox 有一个关于背景附件和背景大小的奇怪错误。我称之为错误，我怀疑它不是，但这呈现了我认为在其他主要浏览器中应该的方式（我认为强调）。所需的效果是将垂直重复背景的大小调整为 100% 宽度，同时保持图像比例。

这是我原来的 CSS，在这个版本中，背景不会为 firefox 渲染（即使有 firefox 特定的背景标签）。

body {
    background: #000 url('../background.jpg') left top repeat-y;
    background-attachment: scroll;
    background-size: 100% auto;
}

将background-attachment: scroll; 更改为background-attachment: fixed; 会导致背景呈现，但不希望出现“浮动背景”行为。

[更新]

移除背景位置会导致图像再次正确渲染。

例如

body {
    background: #000 url('../background.jpg') repeat-y;
    background-size: 100% auto;
}

这实际上是一个有问题的修复，因为我的位置值实际上是“左 113 像素”。我可以通过将背景应用于站点标题下方的包装 div 而不是 body 元素来解决此问题，但事实仍然是 Firefox 无法使用 background-size: 100% auto; 渲染背景图像；当使用位置值并且附件是滚动时。

[更新 2]

我意识到只有在出现额外的 CSS 时才会出现该错误。这并不是说额外的 CSS 有问题（不是），而是说这个 Firefox 特定的渲染错误是由它引起的。

额外的 CSS（用于创建灵活的 100% 高度的布局）

html {  width: 100%;    height: 100%;   position: absolute; }

以及用于复制错误的完整主体 CSS

body  {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: #000 url('image.jpg') top left repeat-y;
    background-size: 100% auto;
}

[解决方案] 我通过立即在正文中创建一个额外的包装 div 并在此处附加背景而不指定位置属性来解决我的问题。

#wrapper {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') repeat-y;
    background-size: 100% auto;
}

但是因为我现在有一个额外的包装器，我可以继续从html 中删除位置、高度和宽度属性，从而渲染错误并允许我设置背景的位置。

【问题讨论】：

滚动已经是默认设置。你不需要放它。
是，但与行为无关。
我试过这个w3schools.com/cssref/… 将其更改为滚动并在 Firefox 中正常工作。也许您的代码有其他问题
这在 chrome 和 firefox jsfiddle.net/8CkpB 中的工作方式完全相同
实际上，我在 w3schools 网站上快速复制了该错误。顺便说一句，这也导致了修复，尽管是“不正确”的，但我会更新问题。

标签： css firefox background

【解决方案1】：

我通过立即在正文中创建一个额外的包装 div 并在此处附加背景而不指定位置属性来解决我的问题。

#wrapper {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') repeat-y;
    background-size: 100% auto;
}

但是因为我现在有一个额外的包装器，我可以继续从 html 中删除位置、高度和宽度属性，渲染错误并允许我设置背景的位置。（请参阅我原来的问题中的更新 2）

【讨论】：