CSS3 背景：重复线性渐变答案

【问题标题】：CSS3 background: repeating-linear-gradientCSS3 背景：重复线性渐变
【发布时间】：2013-10-31 08:31:26
【问题描述】：

几天前我读到这篇文章：http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

发现了新的 CSS3 语法repeating-linear-gradient。

到目前为止，它只适用于 FireFox，即使我使用前缀。

background: #000;
background-image: -webkit-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: -moz-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: -ms-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: -o-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);

我有最新版本的 Google Chrome(Version 30.0.1599.101 m) 和 IE(v9.0.8112.16421)。由于某些公司政策，我无法将 IE 更新到更高版本。

我做错了吗？

This is my fiddle

【问题讨论】：

根据caniuse.com/css-repeating-gradients，这分别从 10.0 (-webkit-) 和 26.0 (无前缀) 开始支持。
这很奇怪，因为它不起作用。我还从浏览器中清除了完整的缓存。

标签： html css background linear-gradients

【解决方案1】：

您的示例在 Firefox (20.0) 和 Chromium (25.0.1364.160) 中确实有效。我从MDN - repeating-linear-gradient 改编了这个例子。我只添加了宽度和高度

#grad3 {
    width: 100px;
    height: 100px;
}

见JSFiddle

当您更改其中一种黑色时，您会更好地看到图案，请参阅修改后的JSFiddle。

【讨论】：

JSFiddle 在谷歌浏览器中工作，但我网站中的相同代码不能。 This is my fiddle
那么你的网站中还有其他东西，它阻止了渐变的工作。查看控制台是否有任何错误消息。
不，我没有错误。这个小提琴在你的谷歌浏览器中工作吗？
是的，确实如此。我想，JSFiddle 也可以在您的 Chrome 中使用？
我发布了我的代码的JS Fiddle，但这不起作用。

【解决方案2】：

对于 IE 8,10 可以使用：

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

IE9 不支持 CSS 渐变， http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/ 我建议使用 -pie-gradiant 解决 IE9 中的问题： http://css3pie.com/documentation/supported-css3-features/

您也可以使用http://www.colorzilla.com/gradient-editor/ 以获得更好的结果，

【讨论】：