我们如何使用和控制Gradient

Question

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

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

我希望用简单的CSS Gradient颜色替换它而没有图像...所以我在互联网上搜索了一遍，我发现了这个：

 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，我在渐变中播放了一些称为“Opacity Midpoint”的渐变..它是否适用于CSS ..如果是，如何使用它？

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

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

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

Answer 1

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

然后没有指定渐变的CSS标准;有一个工作草案是CSS 3的一部分，但它还远未完成，因此linear-gradient和radial-gradient功能尚未广泛使用，无论如何都可能会发生根本性的变化。

除了其他人之外，WebKit完全做了自己的事情。

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

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

Answer 2

难点在于没有可靠的跨浏览器方式来制作没有图像的渐变。

• filter仅适用于IE
• -webkit-gradient仅适用于某些浏览器
• 还有新的<svg> tag，它也没有任何一致的实现。

如果您仍然真的这样做，唯一的另一个选择是使用javascript（see this site为例）生成它们。