Image IE10的背景图像和梯度

我有多个渐变背景，它适用于Firefox、Chrome和Safari，还有一些针对移动设备的媒体查询

像往常一样，问题是Internet Explorer。我曾经有一个IE的条件样式表，我只加载了一个背景图像，但据我所知，IE10不支持<--如果IE-->在我的CSS中

理想情况下，我想让css3渐变和独立的背景图像在所有浏览器上工作，我很乐意在所有IE浏览器上使用单一背景图像，但到目前为止，单一背景图像不适用于IE

main style.CSS中的CSS

    body{
    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);

    background-attachment:fixed;
    background-position:top right, top left, center bottom,  bottom right,  left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-color:#509deb;
    display:block;}

Internet Explorer的CSS:style-ie.CSS

    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: url('img/bknd_full_img.jpg');
    background-attachment:fixed;
    background-position:center top;
    background-repeat: no-repeat;
    background-color:#fff;
    display:block;  
}

---

问题是，您只为WebKit（使用旧语法）和Firefox（使用稍新的语法）提供渐变和多重背景。IE或Opera都无法显示渐变或多个背景，因为您不提供它们的前缀或无前缀版本

IE10使用最新和最终的语法实现渐变，没有前缀。最新的Opera也是如此，最近的Firefox也是如此。IE10不需要您的条件注释代码，因为它的工作方式与其他浏览器相同

径向梯度应类似于：

background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png),
    radial-gradient(circle closest-side at center, #c0deff, #509deb);

有关语法更改的更多详细信息，请参见IE博客[0]和规范[1]

[0],， [1]