Question

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;会导致渲染背景，但不希望出现“浮动背景”行为。

[UPDATE]

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

e.g。

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

这实际上是一个有问题的修复，因为我的位置值实际上是'左113px'。我可以通过将背景应用于网站标题下面的包装div而不是body元素来解决这个问题，但事实仍然是Firefox无法渲染背景大小的背景图像：100％自动;当使用位置值并且附件是滚动时。

[更新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移除位置，高度和宽度属性，使得错误无法实现并允许我设置背景的位置。

Answer 1

我通过在主体内立即创建一个额外的包装div并在不指定位置属性的情况下附加背景来解决我的问题。

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

但是因为我现在还有一个额外的包装器，我可以继续从html中删除位置，高度和宽度属性，使得bug无法实现并允许我设置背景的位置。（参见原始问题的更新2）

如何：background-size：100％自动，背景附件：滚动

1 个答案: