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漸變跨瀏覽器

回答

相關問題