仅使用 html 和 css 和 javascript 的渐变？答案

【问题标题】：gradients using only html and css and javascript?仅使用 html 和 css 和 javascript 的渐变？
【发布时间】：2008-12-11 19:58:26
【问题描述】：

有没有办法在 css/html/javascript 中进行渐变，只适用于所有主要浏览器？（MS IE 5+、Firefox、Opera、Safari）？

编辑：我想为背景（标题、主面板、侧面板）执行此操作。另外，也希望有垂直线渐变。

编辑：阅读回复后，让我们也将其开放给 Javascript 解决方案，因为 HTML/CSS 本身使其更难实现。

【问题讨论】：

标签： gradient

【解决方案1】：

我以前做过这个作为一个噱头，使用像这样的javascript：

var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width='100%';
    div.style.height = 1/count+"%";
    div.style.top = i/count+"%";
    div.style.zIndex = -1;
    parent.appendChild(div);
}

如果您的要求只是要有一个渐变，您真的应该在 css 中使用设置为背景图像的渐变图像。就我而言，我也在为渐变的颜色和位置设置动画。我现在不能保证它是跨浏览器（对于初学者，请确保父级应用了一些位置，否则它将不是绝对定位的位置容器。

【讨论】：

【解决方案2】：

我不清楚您正在寻求的实现细节（例如背景，或者只是窗口一侧的边框等）；不过，这可能有点乏味。

想到的一个例子是拥有 n 块级元素，例如 div，然后给它们每个小高度（例如几个像素），然后逐渐改变每个后续的背景颜色元素。

【讨论】：

这种方法的问题在于它们从根本上混淆了结构和表示。
是的，我不同意你的看法。我只是不知道任何其他仅使用 HTML/CSS 并适用于所有 A 浏览器的选项。
取决于实现的样子，如果它适用于所有 A 浏览器，混合结构和演示而不理想，我会考虑与在 Photoshop 中创建图像。你有任何使用 html/css 的例子吗？
进一步使用 div 等来创建背景可能最终会比图像本身占用更多的带宽......
如果你在脚本中这样做不会消耗太多带宽，我绝对会推荐。

【解决方案3】：

我使用 colorzilla 的渐变 CSS 代码生成器：http://www.colorzilla.com/gradient-editor/

它有 IE 的 polyfills - 但不确定它有多远。

【讨论】：

【解决方案4】：

我认为简短的回答是否定的。

您可以仅使用 css 创建看起来像渐变的东西，然后将其用作图像背景...我认为这有点推动它。

编辑（感觉很傻）

我找到了解决方案：http://en.wikipedia.org/wiki/JPEG

【讨论】：

【解决方案5】：

现在有很多方法可以创建渐变。 1.您可以为它创建图像。 2. 使用CSS3 Gradient，可以是线性的、径向的和重复的。

线性语法：

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

径向语法：

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

对于 IE6 到 IE 9，我们可以使用 filter 属性，也可以使用 CSS3Pie。

以下是一些有帮助的参考：

Mozilla MDN

CSS3File

【讨论】：