只使用html和css和javascript的渐变?

时间:2008-12-11 19:58:27

标签: gradient

有没有办法在css / html / javascript中做渐变,哪个适用于所有主流浏览器? (MS IE 5 +,Firefox,Opera,Safari)?

编辑:我想为背景(标题,主面板,侧面板)执行此操作。此外,还希望有垂直线渐变。

编辑:在阅读完回复后,让我们打开Javascript解决方案,因为HTML / CSS本身使得实现更难。

5 个答案:

答案 0 :(得分: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中使用渐变图像集作为背景图像。就我而言,我也在为渐变的颜色和位置设置动画。我不能保证现在跨浏览器(对于初学者,确保父母有一些位置应用,否则它不会是绝对定位的位置容器。

答案 1 :(得分:2)

我不清楚你正在寻找的实施细节(例如背景,或者只是窗边的边框等);然而,虽然有点乏味,但它可能会有点乏味。

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

答案 2 :(得分:1)

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

它有IE的polyfill - 但不知道它有多远。

答案 3 :(得分:0)

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

你可以使用css创建看起来像渐变的东西,但是然后像图像背景那样使用它...我认为这会推动它。

编辑(感觉很傻)

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

答案 4 :(得分:0)

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

linear的语法:

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

radial的语法:

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

对于IE6到IE 9,我们可以使用过滤器属性,也可以使用CSS3Pie

以下是一些有用的依据:

Mozilla MDN

CSS3File

豫ICP备18024241号-1