5

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

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

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

4

5 回答 5

3

我以前做过这个作为一个噱头，使用像这样的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 中使用设置为背景图像的渐变图像。就我而言，我也在为渐变的颜色和位置设置动画。我现在不能保证它是跨浏览器（对于初学者，请确保父级应用了一些位置，否则它将不是绝对定位的位置容器。

于 2008-12-11T20:43:32.250 回答
2

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

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

于 2008-12-11T20:00:42.947 回答
1

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

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

于 2013-02-23T18:40:33.623 回答
0

There are lots of ways to create a gradient now. 1. You can create image for it. 2. Use CSS3 Gradient, it can be linear, radial and repeating.

Syntax for linear :

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

Syntax for radial :

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

For IE6 to IE 9 we can use the filter property or you can also use CSS3Pie.

Following are some referances that will help:

Mozilla MDN

CSS3File

于 2013-09-09T03:21:32.160 回答
0

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

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

编辑（感觉很傻）

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

于 2008-12-11T20:27:08.557 回答