0

我从这个 URL 生成了这个 CSS：http: //ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, #FFFFFF), color-stop(1, #BCD2E3));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle closest-corner at center bottom, #FFFFFF 0%, #BCD2E3 100%);

我怎样才能使它在旧浏览器中很好地降级并使用图像而不是渐变？

这是我当前的带有背景图像的 CSS，另外，我的图像当前是 1600X144，我希望渐变的中心相应地居中。：

.navbar .navbar-inner {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    background: url(../images/bgHeader2.png);
}
4

3 回答 3

3

对于旧浏览器，生成的代码已经降级：它们将使用background-image: url(bgHeader2.png);属性值并忽略渐变属性，因为它们无法解析它们（这就是属性的顺序很重要的原因）。

除了生成的代码非常冗长之外，我看不到任何错误。

于 2012-09-17T21:29:49.977 回答
1

其他人提到您的示例应该可以正常工作和降级，所以我不会深入讨论。

至于您关于使渐变图像居中的旁注。控制背景图像位置的最简单方法是通过background-position属性。

不知道你如何不定位你的背景，但一个疯狂的猜测是这样的：

background-position: center center;

您也可以直接在后台属性中执行此操作：

background: url(../images/bgHeader2.png) center center;
于 2012-09-17T21:33:23.307 回答
0

你确定只使用background: ....而不是更好background-image:吗（我不知道这是否有帮助，但如果你检查ColorZilla，它会显示一个支持旧浏览器的示例。但是渐变应该在 IE6 中工作......

于 2012-09-17T21:30:42.970 回答