1

我今天一直在整理一个页面，并认为我会使用 CSS3 实现条纹背景。除 Firefox 外，所有浏览器中的一切似乎都很好。（我使用的是 5.01，但也签入了 5.0）

代码很简单：

    body {
    background-color: #ebeced;
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%,
    transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
    background-size:6px 6px;
    }

在 Chrome 和 opera 中运行良好，但实际上会使 FF 崩溃。

显然，我知道我可以通过重复的背景图像来实现这种效果，但我想知道是否有其他人有类似的问题，或者它只是 CSS3 的初期问题；）

在 jsfiddle 中进行测试会产生同样的问题，我没有做任何事情，因为我不想负责让你崩溃！

哦，这不是电脑速度慢的问题，我在 i7、8gb 内存上，等等。

我认为这是 background-size 属性的问题，好像你增加它或完全删除它然后问题就解决了，但是它不适合我，除非我可以使用 background-size。

4

2 回答 2

2

我很确定我知道问题出在哪里。

性能问题对我来说不是很明显，但我使用的是新的四核。我所看到的是，当我创建一个空白页面并将该 css 放在那里时，如果我调整浏览器的大小，重绘有点笨拙。

问题在于您将绘制 CSS3 渐变与以非常小的尺寸 (6px) 平铺该渐变相结合。这意味着对于每 1000 sq.px 的页面空间，渐变将平铺 27,777 次 [1000/6 平方]。那是一吨！智能浏览器会绘制一次渐变，然后将其平铺。似乎 Firefox 可能每次都绘制渐变。如果是这样的话，那确实是一个错误。如果我将背景大小属性修改为更大的值，比如 20px，那么我不再看到性能问题，但其他人会。如果您不希望您的用户遇到这些问题，我会说您应该远离这种组合，因为速度较慢的计算机在您看不到任何问题时仍然会出现问题。

简单的解决方法是不使用 css3 渐变。只需创建一个图像 - 浏览器擅长平铺这些图像。即使有图像，有时最好使用更大的图像......

如果背景小于 40x40 像素，早期版本的 Netscape Navigator 会忽略背景。我记得我发现了我试图解决的错误的原因，并意识到即使能够使用 1x20 图像作为背景看起来不错，因为这将是最小的文件大小，但这并不是最好的选择性能，因为它为浏览器创建了更多的渲染工作。相反，我创建了一个更大的 50x20 版本的图像。效果是一样的，但是节省了一些处理时间。

于 2011-08-31T10:05:38.850 回答
0

你有没有尝试添加...

-moz-background-size:6px 6px;

...到你的CSS？

于 2011-07-20T18:39:43.603 回答