Question

我的Firefox表现得很奇怪。我使用一个简单的4x4px透明PNG作为div背景（像往常一样）。在Chrome，Safari，Opera甚至IE中，它看起来很棒但在FF中却“破碎”了。这是一张图片，向您展示我在说什么：http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G。

我使用图像和渐变作为背景，但如果我只使用图像，则会产生相同的结果。

以下是代码：

#wrap {
  background-color: #f5f5f5;
  background-image: url(../images/general/bg-wrap.png);
  background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
  background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
  background-position: 0 0; background-repeat: repeat;
}

当我只使用背景图片时，它看起来像这样：

#wrap {
   background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}

这是bg-wrap.png：http://cl.ly/0i3i1R0P2R0i1K1h1V1P。我不明白发生了什么......

Answer 1

每个人对Firefox错误和背景图片磁贴尺寸都是正确的 - 我遇到的问题是16p x 16px的瓷砖。 Nealio的回答似乎是正确的，但这不是一个解决问题的问题。相反，拿你的瓷砖并逐字复制它，使其水平和垂直重复，然后使用该瓷砖作为背景图像。

例如，我的背景图片是一个非常小的棋盘格的简单图块。交替的灰色和白色方块。第一个图像是无限平铺图案的最小图像，因此每个图像都是＃34; checker＆＃34;测量8px x 8px，得到16px x 16px的背景图像。除了 Firefox之外，它在任何地方看起来都很好，它会显示与你的相同的zig zaggy jaggy渲染。

在阅读了Nealio的回复之后，我拿出了第一个图案拼贴并将其加倍，以便它是4个棋子x 4个棋子（8px X 4 = 32）。

瞧！相同的背景外观，但只是略大的瓷砖。

Answer 2

我唯一能想到的是，多年前，早期版本的Firefox无法重复太小的背景图像（小于约16x16）。

当与渐变填充css结合使用时，也许这是该bug的新版本。？

通过使用更大的背景图像进行测试来排除这种情况。

Answer 3

这很奇怪......

我设置了一个小提琴，它的工作原理如下：http://jsfiddle.net/will/KMVvT/

你认为这可能是其他干扰吗？

Answer 4

您不应该在结束括号后用逗号分隔mozilla和webkit功能。图像路径也应该用引号括起来。

我遇到了问题，图片没有显示，但可以在FireBug中查看。原因是adblock加上扩展名。禁用该页面（或一般）后，再次显示它。

Firefox背景图片bug

4 个答案: