html - 我们如何使用和控制渐变

Question

我用它作为背景栏……当然要重复

http://www.freeimagehosting.net/uploads/3c2f75b680.gif

我想用没有图像的简单 CSS 渐变颜色替换它......所以我在整个互联网上搜索，我发现了这个:

 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff' ,startColorstr='#000000'  , gradientType='0');

，但这还不够……然后我在 StackOverFlow.com 上搜索我找到了this , 非常接近我的问题..

首先我打开了this ，但是示例没有显示任何渐变(看起来只是文本 .. 并且没有渐变)...

然后我打开了this ，我一直在尝试这个:

linear-gradient(top, yellow, blue 20%, #0f0);

在 div 上:

<div style="width: 633px; height: 268px; background:linear-gradient(top, yellow, blue 20%, #0f0);">
</div>

也没有用...

1. 我检查了 photoshop，我在名为“不透明度中点”的渐变中播种了一些东西。它在 CSS 中可用吗？如果可用，如何使用它？

2. 在 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff' ,startColorstr='#000000' , gradientType='0'); 如何设置限制对于 startColorstr？

3. 如何使用linear-gradient(top, yellow, blue 20%, #0f0); 和radial-gradient(bottom left, farthest-side, red, yellow 50 像素，绿色)； 在 CSS 中？

**注意:**一个简单的好答案就可以了，但我想知道所有这些……谢谢

Answer 1

首先，filter 属性仅在 Internet Explorer 中可用。它不适用于任何其他浏览器。

然后没有指定渐变的CSS标准；有一个工作草案是 CSS 3 的一部分，但它远未完成，因此函数 linear-gradient 和 radial-gradient 尚未广泛使用，可能会受到影响无论如何都要进行根本性的改变。

WebKit 完全独立于其他人之外，完全按照自己的方式行事。

这是关于 CSS 渐变的当前状态，即使浏览器供应商实现 CSS 工作草案，属性和函数名称也会以 -moz- 或 -webkit- 为前缀code> 等。实际上，它们并不意味着可以在网络上自由使用。它更像是对可能发生的事情的技术预览，但事情很可能会发生变化，最终的属性/函数无论如何都会以不同的方式命名(没有前缀)。

如果您需要参数化渐变，那么最好的办法可能是编写一个根据多个参数创建它们的脚本。