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?
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 .
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,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.