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);
}
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.
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;
您确定只使用background: ....
而不是background-image:
会不会更好(我不知道这是否有帮助,但是如果您选中ColorZilla ,它将显示一个支持旧浏览器的示例。但是渐变应该可以在IE6中使用...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.