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 */

CSS背景设计不适用于IE9

1 个答案: