web-dev-qa-db-ja.com

背景と背景色の違いは何ですか

backgroundとbackground-colorを使って背景色を指定することの違いは何ですか？

スニペット＃1

body { background-color: blue; }

スニペット＃2

body { background: blue; }
cssbackgroundbackground-color
250
stanigator

これらは2つの異なるプロパティであることを前提としています。具体的な例では、 background は実際には省略形であるため、結果に違いはありません。

背景色
背景画像
背景の位置
バックグラウンドリピート
背景添付ファイル
background-clip
背景 - 由来
背景サイズ

したがって、 background-color のほかに、backgroundショートカットを使用して、他のbackground-*プロパティを複数回繰り返すことなく1つ以上の値を追加することもできます。

どちらを選択するかは基本的にはあなた次第ですが、それはあなたのスタイル宣言の特定の条件にも依存します（例えば、親要素から他の関連するbackground-colorプロパティを継承するときbackground-*だけをオーバーライドする必要がある場合、あるいはすべて削除する必要がある場合） background-color以外の値.

229
fcalderan

backgroundは、以前のすべてのbackground-color、background-imageなどの指定に優先します。これは基本的には省略形ですが、リセットでもあります。

私は時々それを使用して、テンプレートのカスタマイズで以前のbackgroundの指定を上書きします。そこで、私は次のようにしたいと思います。

background: white url(images/image1.jpg) top left repeat;

次のようになります。

background: black;

そのため、すべてのパラメータ（background-image、background-position、background-repeat）はデフォルト値にリセットされます。

140
Anriëtte Myburgh

CSSの掲載結果について：

backgroundvsbackground-color：

1回はbackground、もう1回はbackgroundと一緒に、小さな長方形としてページ上に100回レンダリングされた18色の色見本の比較。色.

Background vs background-color

これらの数値は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

74
l2aelba

backgroundを使用すると、すべてのbackgroundプロパティを次のように設定できます。

  • background-color
  • background-image
  • background-repeat
  • background-position
    など

background-colorを使えば、背景の色を指定することができます。

background: url(example.jpg) no-repeat center center #fff;

VS。

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

詳細

（キャプション：背景 - 省略形のプロパティを参照）

23
alphanyx

違いの1つ：

このように画像を背景として使用すると、次のようになります。

background: url('Image Path') no-repeat;

それならば、 "background-color"プロパティで上書きすることはできません。

あなたが色を適用するために背景を使っているなら、それはbackground-colorと同じであり、上書きすることができます。

例： http://jsfiddle.net/Z57Za/11/ and http://jsfiddle.net/Z57Za/12/

7
Ankit

違いはありません。どちらも同じように動作します。

CSS背景プロパティは、要素の背景効果を定義するために使用されます。

背景効果に使用されるCSSプロパティ：

  • 背景色
  • 背景画像
  • バックグラウンドリピート
  • 背景アタッチメント
  • 背景位置

Backgroundプロパティには、これらすべてのプロパティが含まれているので、それらを1行で書き込めます。

3
Chuck Norris

どちらも同じです。バックグラウンドセレクタは複数あり（background-color、background-image、background-position）、より単純なbackgroundセレクタまたはより具体的なセレクタを使用してそれらにアクセスできます。例えば：

background: blue url(/myImage.jpg) no-repeat;

または

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
3
DC_

違いは、background速記プロパティがいくつかの背景関連のプロパティを設定することです。あなたが指定しただけであっても、それはそれらすべてを設定します。カラー値。それ以来、他のプロパティは初期値に設定されます。 background-imageからnoneへ。

これは、これらのプロパティの他の設定が常に上書きされるという意味ではありません。これは通常の、一般的に誤解されている規則に従ってカスケードに依存します。

実際には、この短縮形はいくぶん安全になる傾向があります。背景画像などの予期しない背景プロパティを別のスタイルシートから誤って取得しないようにするための予防策です。そのうえ、それはより短いです。しかし、それは本当に「すべての背景プロパティを設定する」という意味であることを覚えておく必要があります。

3
Jukka K. Korpela

backgroundはbackground-colorのショートカットで、背景には以下のようなものがあります。

background-color
background-image
background-repeat
background-attachment
background-position

W3Cから以下の声明を読んでください。

背景 - 速記プロパティ

コードを短くするために、1つのプロパティですべての背景プロパティを指定することも可能です。これは速記資産と呼ばれます。

Backgroundの短縮形のプロパティはbackgroundです。

body {
  background: white url("img_tree.png") no-repeat right top;
}

速記プロパティを使用する場合、プロパティ値の順序は次のとおりです。

background-color
background-image
background-repeat
background-attachment
background-position

他のプロパティ値がこの順序である限り、いずれかのプロパティ値が欠落していても問題ありません。

1
Alireza

ページ上に100回レンダリングされた18色の色見本を、背景付きと背景色付きの1回ずつ、小さな長方形として比較します。

私はCSS performance実験を再作成しました、そして結果は今日かなり異なっています。

background

Chrome 54：443（µs/div）

Firefox 49：162（µs/div）

Edge 1：56（µs/div）

background-color

Chrome 54：449（µs/div）

Firefox 49：171（µs/div）

Edge 1：58（µs/div）

ご覧のとおり、ほとんど違いはありません。

1
Marcin Biernacki

これが最良の答えです。短縮形（背景）はリセット用で、DRY（省略形と組み合わせる）です。

1
Jonh Doe

背景色でグラデーションを設定することはできません。

これは動作します：

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

これは違います

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
0
Vörös Amadea

Outlook用の電子メールを生成するときに気付きました...

/*works*/
background: gray;

/*does not work*/
background-color: gray;
0
Homer

これを継承して遊ぶことができることを理解したら、かなりきれいなことをすることができます。しかし、最初にこれから何かを理解しましょう 背景に関するドキュメント：

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>

これで、背景色も同じです。

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

最後の数字は背景色を設定します。

それから私達が背景（それから私達はグラデーションを得る）または背景色から受け継いでいる前に、それから我々は赤になります。

0
Ced