CSS背景设计不适用于IE9

Question

我有以下代码来设计一个页面的背景：

body 
{
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    background: -webkit-radial-gradient(50% 20%, circle farthest-side, transparent 0%, rgba(0, 0, 0, 0.6) 100%), url('../images/background.png');
    background: radial-gradient(50% 20%, circle farthest-side, transparent 0%, rgba(0, 0, 0, 0.6) 100%), url('../images/background.png');
    background: -moz-radial-gradient(50% 20%, circle farthest-side, transparent 0%, rgba(0, 0, 0, 0.6) 100%), url('../images/background.png');
    background: -o-radial-gradient(50% 20%, circle farthest-side, transparent 0%, rgba(0, 0, 0, 0.6) 100%), url('../images/background.png');
    background: -ms-radial-gradient(50% 20%, circle farthest-side, transparent 0%, rgba(0, 0, 0, 0.6) 100%), url('../images/background.png');
    margin: 0;
    padding: 0;
}

它适用于IE10 +，但是我们如何让它适用于IE9和IE8呢？JSFiddle

提前谢谢。

Answer 1

简而言之: IE9使用与所有其他浏览器或其更新版本完全不同的语法：

CSS梯度在成为候选推荐之前有很多变化(比如4到5次重写)。下面的代码可以在几乎所有的浏览器版本中运行。

background: -moz-radial-gradient(center, ellipse cover, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(153,218,255,1)), color-stop(100%, rgba(0,128,128,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(153,218,255,1) 0%, rgba(0,128,128,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99DAFF', endColorstr='#008080',GradientType=1 ); /* ie6-9 */