314

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

スニペット＃1

body { background-color: blue; }

スニペット＃2

body { background: blue; }
4

17 に答える 17

290

これらが2つの異なるプロパティであると仮定すると、background実際にはの省略形であるため、特定の例では結果に違いはありません

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

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

どちらを選択するかは基本的にあなた次第ですが、スタイル宣言の特定の条件にも依存する可能性があります (たとえば、親要素からbackground-color他の関連プロパティを継承するときにのみをオーバーライドする必要background-*がある場合、またはすべての値を削除する必要がある場合)。を除くbackground-color)。

于 2012-04-18T08:18:30.157 に答える
170

backgroundbackground-colorすべての以前のbackground-image、などの仕様に取って代わります。これは基本的に省略形ですが、リセットでもあります。

backgroundテンプレートのカスタマイズで以前の仕様を上書きするために使用することがあります。

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

次のようになります。

background: black;

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

于 2012-04-18T08:20:42.320 に答える
98

CSSのパフォーマンスについて：

background対background-color:

1 ページに小さな四角形として 100 回レンダリングされた 18 の色見本の比較。1 回はbackgroundで、もう 1 回はbackground-color で。

背景と背景色

これらの数値は 1 回のページのリロードによるものですが、その後の更新でレンダリング時間は変化しましたが、割合の差は基本的に毎回同じでした。

Safari 7.0.1 で background-color の代わりに background を使用すると、約 42.6 ミリ秒短縮され、ほぼ 2 倍の速さになります。Chrome 33 はほぼ同じように見えます。

これは、2 つの理由で最も長い間、私を驚かせました。

  • 私は通常、CSS プロパティ、特に背景の明示性について常に主張します。
  • ブラウザが を見ているときbackground: #000;、彼らは本当に を見ていると思いましたbackground: #000 none no-repeat top center;。ここにはリソースへのリンクはありませんが、どこかでこれを読んだことを思い出します。

参照: https://github.com/mdo/css-perf#background-vs-background-color

于 2014-06-11T19:15:13.523 に答える
28

次のようなすべてのプロパティbackgroundを設定できます。background

  • background-color
  • background-image
  • background-repeat
  • background-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;

より詳しい情報

(キャプション: 背景 - 省略形プロパティを参照)

于 2012-04-18T08:20:43.683 に答える
8

違いの1つ：

この方法で画像を背景として使用する場合:

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

その場合、「背景色」プロパティでオーバーライドすることはできません。

ただし、背景を使用して色を適用する場合は、背景色と同じであり、オーバーライドできます。

例: http://jsfiddle.net/Z57Za/11/およびhttp://jsfiddle.net/Z57Za/12/

于 2012-04-18T08:57:33.587 に答える
3

違いは、background省略形のプロパティがいくつかの背景関連のプロパティを設定することです。たとえば、色の値のみを指定した場合でも、他のプロパティは初期値に設定されるため、すべてが設定されbackground-imageますnone。

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

実際には、速記の方がいくらか安全な傾向があります。これは、別のスタイル シートから背景画像などの予期しない背景プロパティを誤って取得することに対する予防策です (完全ではありませんが、便利です)。その上、それはより短いです。ただし、これは実際には「すべての背景プロパティを設定する」ことを意味することを覚えておく必要があります。

于 2012-04-18T10:18:09.587 に答える
3

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

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

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

  • 背景色
  • 背景画像
  • バックグラウンドリピート
  • 背景添付ファイル
  • 背景位置

Background プロパティにはこれらのプロパティがすべて含まれており、1 行で記述できます。

于 2012-04-18T08:18:14.520 に答える
3

どちらも同じです。複数のバックグラウンド セレクター ( 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;
于 2012-04-18T08:22:05.190 に答える
2

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

CSS パフォーマンス実験を再作成しましたが、結果は最近大きく異なります。

background

クローム 54 : 443 (µs/div)

Firefox 49 : 162 (マイクロ秒/div)

エッジ 10 : 56 (µs/div)

background-color

クローム 54 : 449 (µs/div)

Firefox 49 : 171 (マイクロ秒/div)

エッジ 10 : 58 (µs/div)

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

于 2016-11-15T13:33:42.723 に答える
0

Outlook 用のメールを生成しているときに気付きました...

/*works*/
background: gray;

/*does not work*/
background-color: gray;
于 2015-08-14T16:43:32.537 に答える
0

これで継承をいじることができることを理解すれば、かなり素晴らしいことを行うことができます。ただし、最初にこのドキュメントの背景について理解しましょう。

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;

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

次に、背景 (グラデーションを取得) または背景色から継承する前に、赤を取得します。

于 2017-01-05T05:52:18.290 に答える
-2

ドキュメントに表示されていないことに気付いたのは、 background: url("image.png")

画像が見つからない場合、上記のような省略形を使用すると、無視される代わりに 302 コードが送信されます。

background-image: url("image.png")
于 2014-06-11T18:39:30.490 に答える
-2

background と background-color に関するバグがあります

これの違いは、背景を使用する場合、時には CSS バックグラウンドで Web ページを作成する場合です。安全に使用するための色、個々の場合はデザインで

于 2017-08-23T10:22:02.660 に答える