1

我正在生成一个水平渐变条作为我网站的背景，该条在除...IE9 之外的所有浏览器中都能完美运行。

渐变本身是有效的，只是我想限制蓝条的高度。在 Safari/Firefox/Chrome 中查看，然后在 IE9 中查看，您可以看到蓝色渐变填充了整个元素。

使用 CSS 的水平渐变条

这是我的CSS：

#inner {
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 35%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(35%,#0057be));
background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -o-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: linear-gradient(to bottom,  #1e5799 0%,#0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;

}

4

1 回答 1

3

此代码应适用于 IE9：

background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);

我用Visual CSS Gradient Generator做的

更新的 CSS：

#inner {
background: #1e5799;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #1e5799), color-stop(35%, #0057be));
background: -webkit-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -moz-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -ms-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -o-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: linear-gradient(to bottom, #1e5799 0%, #0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;
}

IE9 不支持 CSS3 渐变，但它支持内联 SVG。我不建议filter在 IE9 上混合使用 SVG 背景，我认为最好的方法是使用Paul Irish 的这篇文章中解释的条件注释。

于 2012-10-09T10:39:09.090 回答