CSS background-image：重复线性渐变跨浏览器

Question

以下CSS类仅适用于现代chorme或firefox：

.grating{
background-image: repeating-linear-gradient(-45deg, 
        transparent, 
        transparent 7px, 
        rgba(255,255,255,1) 5px, 
        rgba(255,255,255,1) 10px
    );
}

所以我需要一些可以在旧IE中使用的CSS代码。我想我需要这样的东西：

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

对于IE应该是：

progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

这些只是其他CSS类的例子，不适合我的。

最终我需要的是：

（只是白色条纹）背景颜色在不同的情况下可能会有所不同，并且尺寸可以更大或更小，所以我只需要一条透明的白色条纹，一条透明的白色......

我不知道如何将我的课程引入IE＆lt; 10友好语法......我想我需要一些专家帮助......

Answer 1

浏览器支持 表中的数字指定了完全支持该属性的第一个浏览器版本。

后跟-webkit-， - moz-或-o-的数字指定使用前缀的第一个版本。

  

重复线性渐变

---

  

  
• IE＆gt; 10.0
  
• chrome＆gt; 26.0 -webkit-（10.0）
  
• firefox＆gt; 16.0 -moz-（3.6）
  
• safari＆gt; 6.1 -webkit-（5.1）
  
• opera＆gt; 12.1 -o-（11.1）
  

MDN，support browser (caniuse)

.grating {
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Standard syntax */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
 /* IE 5 to 9*/
 filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);
 }