Navbarのグラデーションイメージまたは純粋なCSSを使用しますか？

Question

私はブートストラップを使用しており、いくつかのグラデーションと透明度を持つnavbarの色を変更したいとします（添付の画像を参照）。私は、コード

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

または私はCSSに変換する必要があるとのイメージを使用して、純粋なCSSを使用する必要がありますか？

ブラウザはどのようにサポートされていますか？

純粋なCSSの場合は、色とサイズを変更するのが簡単ですが、同じ結果を得るためにはもっと多くのコードが必要になります。

純粋なCSSまたは画像をnavbarの背景色として使用することをお勧めしますか？

Answer 1

私はイメージを使用する理由はありません。テーブルを見ることができます。

また、ブートストラップでのナビゲーションバーのデフォルトの背景は次のとおりです。

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%); 

Answer 2

私はそれはあなたのコードはより柔軟になりますので、純粋なCSSを使用することをお勧め：将来的にはあなたが唯一のグラデーションやtrasparencyを必要とすることができるので、あなたは、あなたが変わる背景画像を使用して、一方にのみ、そのプロパティを変更しますイメージ（悪い解決策）。また、小さな画面でコードを実行すると、bg画像を使用すると問題が発生する可能性があります。 ブラウザのサポートについては、w3schoolsで確認できます

Answer 3

私は両方を使用することを示唆しています！

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

} 

さらに（CSSでBASE64を使用）、URLとしてそれを持つのではなく、サーバーからの追加のリソースをロードするオーバーヘッドをスキップします。この方法は、あなたのイメージをインライン化。

更新

パフォーマンスが賢明、代わりにイメージを持つことは、CSSグラデーションをはるかに効率的にレンダリングするためにされています。イメージのオーバーヘッドはサーバー要求であるため、これを避けるためにbase64でインライン化できます。

単純なCSSのグラジエントでは、その差は小さいので、この場合は常にCSSを使用することをおすすめします。どこでも使えるようにしたい場合は、両方を使用してみてください。古いブラウザーユーザー（私がお勧めします）を罰する場合は、フォールバックとして背景色を使用してください。