CSS渐变图像大小？答案

【问题标题】：CSS Gradient Image Size?CSS渐变图像大小？
【发布时间】：2012-02-07 19:53:31
【问题描述】：

我知道制作渐变图像的最佳方法是将其宽度设置为 1 并让它重复，但我对高度应该是多少感到困惑？

如果观众在一个巨大的显示器或电视屏幕上或其他什么东西上，它应该真的很大吗？有没有办法让它像 1x10 一样看起来正常？

另外，在不使用 CSS3 的情况下做圆角之类的东西......使用图像 - 在流畅的布局中是否可能？

这是我正在谈论的渐变。 this 是Teamliquid.net 上使用的背景渐变。它的高度只有 33px，但你看不出它在 y 轴上重复...？

【问题讨论】：

无论如何，这里的“非常大”是指 256 像素。事实上的颜色标准是每个通道有 256 个值，所以如果你制作的渐变图像的高度超过 256 像素，一些像素将被复制。 256就够了，无法得到更细的粒度。

【解决方案1】：

渐变的高度是 33px，因为导航栏的高度是 33px。当你有一个垂直渐变时，这意味着你需要水平重复它，这意味着你需要一个 1px 的宽度和一个你想要的渐变高度。

【讨论】：

【解决方案2】：

我只推荐使用 CSS3 来实现这种效果。有一些很棒的发电机。我做一些网页设计，我只使用 CSS 渐变。此外，如果您使用图像，则服务器必须处理另一个 http 请求。

编辑： 这也是我对圆角所做的。

它们非常适合流畅的布局。

【讨论】：

这就是图像文件很小的原因。而且，当向服务器再次请求小图像时，您的性能会有所不同，那么您在另一个地方就会遇到更大的问题。 CSS3 渐变非常酷，我喜欢它们。唯一的问题是跨浏览器实现
这是事实，它确实有助于了解您的目标受众。大多数现代浏览器都支持它，对于那些不支持的浏览器，它们只会获得纯色。我不相信这是一个糟糕的交易。不过很高兴听到其他人对此主题的看法。
不，权衡并不大，我个人非常广泛地使用 css3 和旧浏览器的后备技术。但是当我看问题作者的经验水平时，我最好让可能的解决方案尽可能简单。