CSS渐变跨浏览器

Question

I have this CSS generated from this URL: 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%);

How can I make this where it degrades well to older browsers and uses the image instead of the gradients?

Here is my current CSS with a background image, also, my image is currently 1600X144 and I'd like the center of the gradient centered accordingly.:

.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);
}

Answer 1

The generated code already degrades for older browsers: they'll use the background-image: url(bgHeader2.png); property value and disregard the gradient properties because they can't parse them (this is why the ordering of the properties is important).

I can't see anything wrong besides the fact the generated code is very verbose.

Answer 2

Others have mentioned that your example should work and degrade gracefully, so I won't go in to that.

As for your side note about centering the gradient-image. The easiest way to control the position of a background image is throught the background-position property.

Not sure how you wan't to position your background, but a wild guess is this:

background-position: center center;

You could also do it straight in the background-property:

background: url(../images/bgHeader2.png) center center;

Answer 3

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