背景と背景色の違いは何ですか
回答:
これらは2つの異なるプロパティであることを前提としています。具体的な例でbackgroundは、実際には省略形であるため、結果に違いはありません。
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
したがって、のほかにbackground-color、backgroundショートカットを使用して、他のbackground-*プロパティを2回以上繰り返すことなく、1つ以上の値を追加することもできます 。
どちらを選択するかは基本的にあなた次第ですが、スタイル宣言の特定の条件にも依存する可能性があります（たとえば、親要素からbackground-color他の関連するbackground-*プロパティを継承するときのみをオーバーライドする必要がある場合、またはすべての値を削除する必要がある場合）を除くbackground-color）。
P { background: url("chess.png") gray 50% repeat fixed }
background以前のbackground-color、background-imageなどのすべての仕様に優先します。基本的には省略形ですが、リセットもあります。
私は時々それを使ってbackground、テンプレートのカスタマイズで以前の仕様を上書きします。
background: white url(images/image1.jpg) top left repeat;
次のようになります：
background: black;
だから、すべてのパラメータは、（ 、background-image、background-position）、background-repeatデフォルト値にリセットされます。
約 CSSのパフォーマンス：
backgroundvs background-color：
18色見本の比較で一回、小さな長方形としてページ100回レンダリングバックグラウンドで1回地色。
これらの数値は単一のページのリロードによるものですが、その後の更新ではレンダリング時間が変更されましたが、パーセントの違いは基本的に毎回同じでした。
これは、Safari 7.0.1でbackground-colorの代わりにbackgroundを使用した場合、約42.6msの節約であり、ほぼ2倍の速さです。Chrome 33もほぼ同じようです。
これは正直に私を驚かせました。なぜなら、最も長い間、2つの理由があります。
- 私は通常、CSSプロパティの明示性を常に主張します。これは、特に背景の場合、将来の具体性に悪影響を与える可能性があるためです。
- ブラウザーが見る
background: #000;と本当に見えると思いましたbackground: #000 none no-repeat top center;。ここにはリソースへのリンクはありませんが、どこかで読んだことを覚えています。
参照： https : //github.com/mdo/css-perf#background-vs-background-color
These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-conclusions-from-averages
次のようなbackgroundすべてのbackgroundプロパティを設定できます。
background-colorbackground-image
background-repeatbackground-position
等
ではbackground-colorあなただけの背景の色を指定することができます
background: url(example.jpg) no-repeat center center #fff;対。
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;より詳しい情報
（キャプション：背景-省略形プロパティを参照）
違いの1つ：
このように画像を背景として使用する場合：
background: url('Image Path') no-repeat;その後、「background-color」プロパティで上書きすることはできません。
ただし、背景を使用して色を適用する場合は、background-colorと同じで、オーバーライドできます。
例：http : //jsfiddle.net/Z57Za/11/およびhttp://jsfiddle.net/Z57Za/12/
違いは、background省略表現プロパティがいくつかの背景関連プロパティを設定することです。たとえば、色の値のみを指定した場合でも、他のプロパティは初期値、たとえばbackground-imageに設定されるため、すべてが設定されますnone。
これは、これらのプロパティの他の設定を常にオーバーライドすることを意味するものではありません。これは、通常は誤解されている通常のルールによるカスケードに依存します。
実際には、省略形の方が安全な傾向があります。これは、別のスタイルシートから背景画像などの予期しない背景プロパティを誤って取得しないようにするための予防策です（完全ではありませんが、便利です）。その上、それはより短いです。ただし、これは「すべての背景プロパティを設定する」ことを意味することを覚えておく必要があります。
ページ上で小さな四角形として100回レンダリングされた18の色見本の比較。1回は背景で、もう1回は背景色で。
CSSパフォーマンス実験を再現しましたが、結果は今日とは大きく異なります。
backgroundChrome 54：443（µs / div）
Firefox 49：162（µs / div）
エッジ 10：56（µs / div）
background-colorChrome 54：449（µs / div）
Firefox 49：171（µs / div）
エッジ 10：58（µs / div）
ご覧のとおり、違いはほとんどありません。
backgroundbackground-color以下のようないくつかの背景関連のショートカットです。
background-color
background-image
background-repeat
background-attachment
background-position W3Cから以下のステートメントを読んでください。
背景-省略プロパティ
コードを短くするために、単一のプロパティですべての背景プロパティを指定することもできます。これは、省略プロパティと呼ばれます。backgroundの略記プロパティはbackgroundです。
body {
background: white url("img_tree.png") no-repeat right top;
}省略プロパティを使用する場合、プロパティ値の順序は次のとおりです。
background-color background-image background-repeat background-attachment background-position他の値がこの順序である限り、プロパティ値の1つが欠落しているかどうかは関係ありません。
background 以下の略記プロパティです。
- background-color
- background-image
- background-repeat
- background-attachment
- background-positionあなたはここですべてのプロパティの詳細情報を見ることができます
プロパティの順序
ほとんどのブラウザー実装では（おそらく古いブラウザーで問題が発生する可能性があると思います）、次の場合を除いて、プロパティの順序は重要ではありません。
background-originandbackground-clip：このプロパティが両方とも存在する場合、最初のプロパティはを参照し-origin、2番目のプロパティはを参照し-clipます。例：
background: content-box green padding-box;以下と同等です。
background-origin: content-box; background-color: green; background-clip: padding-box;background-size常に従うbackground-position必要があり、プロパティは/background-positionが2つの数値で構成される場合、最初の数値は水平方向の値、2番目の数値は垂直方向の値です。
これで継承を試すことができることを理解したら、かなりきちんとしたことができます。ただし、最初にこのドキュメントの背景を理解しましょう。
CSS3では、要素に複数の背景を適用できます。これらは、最初に提供した背景を上に置き、最後の背景を後ろにリストして、互いの上に重ねられます。最後の背景のみに背景色を含めることができます。
したがって、次の場合：
background: red;赤はリストされている最後の値なので、彼は背景色を赤に設定しています。
人がするとき：
background: linear-gradient(to right, grey 50%, yellow 2%) red;レッドは再び背景色であるしかし、あなたはグラデーションが表示されます。
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background: inherit;
} <div class="box">
</div>今、background-colorと同じこと：
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background-color: inherit;
} <div class="box">
</div>これが発生する理由は、これを実行しているときに、
background: linear-gradient(to right, grey 50%, yellow 2%) #red;最後の数字は背景色を設定します。
次に、背景（グラデーションを取得）または背景色を継承する前に、赤を取得します。
背景と背景色に関するバグがあります
CSSのバックグラウンドでWebページを作成するときに、バックグラウンドを使用するときのこの違い：#fff // Mask image（ "top item、text or image"））のブロックに乗り越えることができるので、常にバックグラウンドを使用する方が良い-安全な使用のための色。
background、5つの属性のいずれかへのショートカットにすぎませんか？したがって、背景の位置、色、画像がある場合、実際の生活では実用的ではありませんか？