在導航欄中使用漸變圖像或純CSS？

-1

我使用引導程序，並希望用某種漸變和透明度更改導航欄的顏色（請參閱附圖）。我應該使用代碼在導航欄中使用漸變圖像或純CSS？

background: url(../img/nav-bg.png) repeat-x;

或者我應該將其轉換爲CSS並使用純CSS？

瀏覽器如何支持？

如果它是純CSS，那麼更改顏色和大小會更容易一些，但是爲了獲得相同的結果，我獲得了更多的代碼。

你是否建議使用純CSS或圖像作爲導航欄的背景顏色？

來源

2016-08-15 Xtreme

你能給我們一個小提琴嗎？或至少一些代碼？ – 2016-08-15 08:22:39

使用背景顏色代替背景圖像。 –

@SayedRafeeq我只是把它標記爲一個重複的 – 2016-08-15 08:24:31

我沒有看到任何理由使用圖像。您可以看到支持here的表格。

另外，在導航欄中引導默認的背景是：

background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%); 
background-image: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%); 
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);

來源

2016-08-15 08:33:28

我建議，因爲它使你的代碼更加靈活使用純CSS：在未來，你可以只需要漸變或trasparency，所以你只更改屬性，而使用背景圖片，你將改變圖像（壞解決方案）。另外，如果在小屏幕上運行代碼，使用bg圖像可能會導致顯示問題。對於瀏覽器支持，你可以在w3schools上驗證它

來源

2016-08-15 08:25:10 Drakenden

-2

我建議你同時使用！

.gradient { 

    /* Fallback (could use .jpg/.png alternatively) */ 
    background-color: red; 

    /* SVG fallback for IE 9 (could be data URI, or could use filter) */ 
    background-image: url(fallback-gradient.svg); 

    /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */ 
    background-image: 
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06)); 

    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ 
    background-image: 
    -webkit-linear-gradient(left, red, #f06d06); 

    /* Firefox 3.6 - 15 */ 
    background-image: 
    -moz-linear-gradient(left, red, #f06d06); 

    /* Opera 11.1 - 12 */ 
    background-image: 
    -o-linear-gradient(left, red, #f06d06); 

    /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */ 
    background-image: 
    linear-gradient(to right, red, #f06d06); 

}

另外直列而不是它作爲一個URL（使用的base64在CSS），這樣你就跳過從服務器上加載額外資源的開銷你的形象。

更新

性能明智的，具有圖像代替是CSS梯度大大上用於呈現更有效。圖像的開銷是一個服務器請求，所以你可以用base64內聯它來避免這種情況。

與簡單的css漸變差異很小，因此在這種情況下總是推薦使用css。如果你真的希望它能在任何地方工作，請嘗試使用它們。如果你想懲罰舊瀏覽器用戶（我建議）使用背景色作爲後備。

來源

2016-08-15 08:39:23 Bamieh

誰低估了我的答案，請你澄清原因？ – Bamieh

在導航欄中使用漸變圖像或純CSS？

回答

相關問題