CSS渐变跨浏览器

我有这个CSS从这个URL生成： http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html CSS渐变跨浏览器

/* 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); 
}

来源

2012-09-17 MB34

这应该* *如果浏览器不支持这些“径向渐变”代码，请使用背景图片。你能举一个例子说明这个工作不正常吗？ – Eric

你测试过了吗？事实上，它应该工作得很好。 – Ana

我建议你使用http://www.colorzilla.com/gradient-editor/伟大的css渐变发生器 – Paradise

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

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

来源

2012-09-17 21:29:49 Dai

是的，#FFFFFF可以很好地写成#fff。另外，不需要0％和100％。 – Ana

你确定它不会是最好只使用background: ....代替background-image:（我不知道这是否会帮助，但如果你检查ColorZilla，它显示了与老浏览器支持的例子，但坡度应在IE6工作...

来源

2012-09-17 21:30:42

使用简写'background：'属性会导致任何先前定义的长手属性被覆盖，即使它们没有在速记属性中指定。这就是为什么CSS生成器通常不使用简写语法。 – Dai

其他人所说的，你的例子应该工作，并适度降低，所以我不会去说。

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

不知道你wan't定位你的背景，但胡乱猜测是这样的：

background-position: center center;

你也能做到这一点直接在后台属性：

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

来源

2012-09-17 21:33:23

CSS渐变跨浏览器

回答

相关问题