2

我的 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 。我不明白发生了什么...

4

4 回答 4

4

每个人都对 Firefox 错误和背景图像磁贴尺寸是正确的——我在使用 16p x 16px 的磁贴时遇到了同样的问题。Nealio 的回答似乎是正确的，但这不是解决问题。取而代之的是，将您的图块逐字复制，使其水平和垂直重复，然后将该图块用作您的背景图像。

例如，我的背景图像是一个非常小的“棋盘”的简单拼贴，带有交替的灰色和白色方块。第一个图像是无限平铺图案的最低限度，因此每个“检查器”的尺寸为 8px x 8px，从而产生 16px x 16px 的背景图像。这在任何地方看起来都很好，除了Firefox，它显示与您相同的锯齿形锯齿状渲染。

在阅读了 Nealio 的回复后，我拿了第一个图案瓷砖并将其翻倍，使其成为 4 个跳棋 x 4 个跳棋（8px X 4 = 32）。

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

于 2012-11-17T01:09:54.760 回答
3

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

当与渐变填充 css 结合使用时，也许这是该错误的新化身..？

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

于 2012-05-16T11:42:37.870 回答
1

这很奇怪……

我设置了一个小提琴，它像这样工作正常：http: //jsfiddle.net/will/KMVvT/

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

于 2012-05-16T11:37:39.040 回答
0

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

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

于 2012-11-09T13:04:24.603 回答