CSS3背景：重复线性渐变

Question

A couple of days ago I read this article: http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

and found about the new CSS3 syntax repeating-linear-gradient .

So far it only works in FireFox, even though I use prefixes.

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);

I have the latest versions of Google Chrome( Version 30.0.1599.101 m ) and IE( v9.0.8112.16421 ). I cannot update IE to a higher version, because of some company policies.

Am I doing something wrong?

This is my fiddle

Answer 1

Your example does work here in Firefox (20.0) and Chromium (25.0.1364.160). I adapted the example from MDN - repeating-linear-gradient . I only added a width and height

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

See JSFiddle

When you change one of the black colors, you will see the pattern better, see modified JSFiddle .

Answer 2

for IE 8,10 can use:

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 not support CSS Gradiant, http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/ i recommend ussing -pie-gradiant for the issue in IE9: http://css3pie.com/documentation/supported-css3-features/

also you can use http://www.colorzilla.com/gradient-editor/ for better result,