在多个背景中混合calc（）和线性渐变在ie9中不起作用

Question

我想减少不必要的div的使用，所以我使用多个背景。但在ie9它似乎不起作用。

background: url(../images/home-2000.jpg) no-repeat -webkit-calc(50% - 200px) top, -webkit-linear-gradient(0deg, #dfe2e7 50%, white 50%);
background: url(../images/home-2000.jpg) no-repeat calc(50% - 200px) top, linear-gradient(90deg, #dfe2e7 50%, white 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfe2e7', endColorstr='#ffffff',GradientType=1 );
-webkit-background-size: auto 100%;
background-size: auto 100%;

Answer 1

IE9不支持CSS渐变：http://caniuse.com/#feat=css-gradients

您可以使用此工具添加IE9渐变支持：http://www.colorzilla.com/gradient-editor/ 它会创建一个允许您嵌入css的svg图像。