it-swarm.com.de

Was ist der Unterschied zwischen Hintergrund und Hintergrundfarbe?

Was ist der Unterschied zwischen der Angabe einer Hintergrundfarbe mit background und background-color?

Snippet # 1

body { background-color: blue; }

Snippet # 2

body { background: blue; }
240
stanigator

Wenn man davon ausgeht, dass dies zwei unterschiedliche Eigenschaften sind, gibt es in Ihrem spezifischen Beispiel keinen Unterschied im Ergebnis, da background eigentlich eine Abkürzung für ist

hintergrundfarbe
Hintergrundbild
Hintergrundposition
Hintergrund Wiederholung
Hintergrundanhang
Hintergrund-Clip
Hintergrund-Herkunft
Hintergrundgröße 

Mit der Verknüpfung background können Sie also neben der background-color auch einen oder mehrere Werte hinzufügen, ohne dass eine andere background-*-Eigenschaft mehr als einmal wiederholt wird.

Welche Sie wählen sollten, liegt im Wesentlichen bei Ihnen, sie kann jedoch auch von den spezifischen Bedingungen Ihrer Stildeklarationen abhängen (z. B. wenn Sie nur background-color überschreiben müssen, wenn Sie andere verwandte background-*-Eigenschaften von einem übergeordneten Element übernehmen, oder ob Sie alle entfernen müssen die Werte außer dem background-color).

223
fcalderan

background ersetzt alle vorherigen background-color, background-image usw. Spezifikationen. Es ist im Grunde genommen eine Abkürzung, aber auch ein Zurücksetzen.

Ich werde es manchmal verwenden, um vorherige background Spezifikationen in Vorlagenanpassungen zu überschreiben, wo ich Folgendes möchte:

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

folgendes sein:

background: black;

Daher werden alle Parameter (background-image, background-position, background-repeat) auf ihre Standardwerte zurückgesetzt.

143

Über CSS-Leistung:

background vs. background-color:

Vergleich von 18 Farbfeldern, die 100 Mal auf einer Seite als klein dargestellt wurden Rechtecke, einmal mit background und einmal mit background-color.

Background vs background-color

Diese Nummern stammen zwar von einer einzelnen Seite, mit nachfolgendem aktualisiert die Renderzeiten, aber die prozentuale Differenz betrug im Grunde jedes Mal das gleiche.

Das bedeutet eine Einsparung von fast 42,6 ms, fast doppelt so schnell, wenn .__ verwendet wird. Hintergrund statt Hintergrundfarbe in Safari 7.0.1. Chrome 33 scheint ungefähr gleich zu sein.

Dies hat mich ehrlich gesagt aus zwei Gründen umgehauen, weil es die längste Zeit war:

  • Normalerweise streite ich immer nach expliziten Eigenschaften in CSS-Eigenschaften, insbesondere mit Hintergründen, da dies die Spezifität der Umgebung beeinträchtigen kann.
  • Ich dachte, wenn ein Browser background: #000; sieht, sehen sie wirklich background: #000 none no-repeat top center;. Ich habe hier keinen Link zu einer Ressource, aber ich erinnere mich, dass ich dies irgendwo gelesen habe.

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

73
l2aelba

Mit background können Sie alle background-Eigenschaften wie folgt festlegen:

  • background-color 
  • background-image
  • background-repeat
  • background-position
    usw. 

Mit background-color können Sie einfach die Hintergrundfarbe festlegen

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;

Mehr Info

(Siehe Bildunterschrift: Background - Shorthand-Eigenschaft)

23
alphanyx

Einer der Unterschiede:

Wenn Sie ein Bild auf diese Weise als Hintergrund verwenden:

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

dann können Sie es nicht mit der Eigenschaft "Hintergrundfarbe" überschreiben.

Wenn Sie jedoch Hintergrund verwenden, um eine Farbe anzuwenden, ist diese mit der Hintergrundfarbe identisch und kann überschrieben werden.

zB: http://jsfiddle.net/Z57Za/11/ und http://jsfiddle.net/Z57Za/12/

7
Ankit

Es gibt keinen Unterschied. Beide funktionieren auf dieselbe Weise.

CSS-Hintergrundeigenschaften werden verwendet, um die Hintergrundeffekte von .__ zu definieren. ein Element.

CSS-Eigenschaften für Hintergrundeffekte:

  • hintergrundfarbe 
  • hintergrundbild 
  • hintergrund Wiederholung 
  • hintergrundanhang 
  • hintergrundposition

Die Hintergrundeigenschaft schließt alle diese Eigenschaften ein und Sie können sie einfach in eine Zeile schreiben.

3
Chuck Norris

Sie sind beide gleich. Es gibt mehrere Hintergrundselektoren (d. H. background-color, background-image, background-position), auf die Sie entweder über den einfacheren background-Selektor oder den spezifischeren zugreifen können. Zum Beispiel:

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

oder

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

Der Unterschied besteht darin, dass die Kurzschreibeigenschaft background mehrere hintergrundbezogene Eigenschaften festlegt. Sie setzt alle, auch wenn Sie nur z. B. einen Farbwert, da dann die anderen Eigenschaften auf ihre Anfangswerte gesetzt werden, z. background-image in none.

Dies bedeutet nicht, dass andere Einstellungen für diese Eigenschaften immer überschrieben werden. Dies hängt von der Kaskade nach den üblichen, allgemein missverstandenen Regeln ab.

In der Praxis ist die Abkürzung tendenziell etwas sicherer. Dies ist eine Vorsichtsmaßnahme (nicht vollständig, aber nützlich), wenn Sie versehentlich unerwartete Hintergrundeigenschaften (z. B. ein Hintergrundbild) aus einem anderen Stylesheet erhalten. Außerdem ist es kürzer. Sie müssen sich jedoch daran erinnern, dass es wirklich "alle Hintergrundeigenschaften setzen" bedeutet.

3

background ist die Abkürzung für background-color und einige andere Hintergrundinformationen wie folgt:

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

Lesen Sie die folgende Erklärung von W3C:

Hintergrund - Eigenschaft der Kurzschrift

Um den Code zu verkürzen, ist es Sie können auch alle Hintergrundeigenschaften in einem einzigen .__ angeben. Eigentum. Dies wird als Abkürzungseigenschaft bezeichnet.

Die Abkürzungseigenschaft für Hintergrund ist Hintergrund:

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

Bei Verwendung der Abkürzungseigenschaft lautet die Reihenfolge der Eigenschaftswerte:

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

Es ist egal, ob einer der Eigenschaftswerte fehlt, solange wie die anderen sind in dieser Reihenfolge.

1
Alireza

Vergleich von 18 Farbfeldern, die 100 Mal auf einer Seite als klein dargestellt wurden Rechtecke, einmal mit Hintergrund und einmal mit Hintergrundfarbe.

Ich habe das CSS Performance Experiment neu erstellt und die Ergebnisse unterscheiden sich heutzutage erheblich.

background

Chrome 54 : 443 (µs/div)

Firefox 49 : 162 (µs/div)

Kante 10 : 56 (µs/div)

background-color

Chrome 54 : 449 (µs/div)

Firefox 49 : 171 (µs/div)

Kante 10 : 58 (µs/div)

Wie Sie sehen, gibt es fast keinen Unterschied.

1

Das ist die beste Antwort. Abkürzung (Hintergrund) steht für Reset und DRY (mit Langschrift kombinieren).

1
Jonh Doe

Ich habe festgestellt, dass Sie keinen Farbverlauf mit Hintergrundfarbe festlegen können.

Das funktioniert:

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

Das tut nicht:

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

Ich habe beim Generieren von E-Mails für Outlook festgestellt ...

/*works*/
background: gray;

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

Sie können ein paar hübsche Sachen machen, wenn Sie verstanden haben, dass Sie damit Vererbung spielen können. Zuerst jedoch etwas aus diesem doc im Hintergrund verstehen:

Mit CSS3 können Sie mehrere Hintergründe auf Elemente anwenden. Diese sind übereinander geschichtet mit dem ersten Hintergrund, den Sie oben angeben und der letzte Hintergrund auf der Rückseite. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.

Wenn man also:

background: red;

Er setzt die Hintergrundfarbe auf Rot, da Rot der letzte Wert ist.

Wenn man:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Rot ist wieder die Hintergrundfarbe , ABER BEI wird ein Farbverlauf angezeigt.

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

Jetzt dasselbe mit Hintergrundfarbe:

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

Der Grund dafür ist, dass wenn wir dies tun:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Die letzte Zahl legt die Hintergrundfarbe fest.

Dann, bevor wir vom Hintergrund erben (dann bekommen wir den Farbverlauf) oder die Hintergrundfarbe, dann bekommen wir Rot.

0
Ced