Was ist der Unterschied zwischen Hintergrund und Hintergrundfarbe?

273

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

Snippet # 1

body { background-color: blue; }

Snippet # 2

body { background: blue; }
Stanigator
quelle

Antworten:

257

Vorausgesetzt, dass dies zwei unterschiedliche Eigenschaften sind, gibt es in Ihrem speziellen Beispiel keinen Unterschied im Ergebnis, da es sich backgroundtatsächlich um eine Abkürzung für handelt

Hintergrundfarbe
Hintergrundbild
Hintergrundposition
Hintergrund-Wiederholung
Hintergrund-Anhang
Hintergrund-Clip
Hintergrund-Ursprung
Hintergrundgröße

So gibt es neben der background-color, die mit backgroundVerknüpfung können Sie auch einen oder mehrere Werte hinzufügen , ohne dass andere sich wiederholende background-*Eigenschaft mehr als einmal.

Welche Sie auswählen müssen, liegt im Wesentlichen bei Ihnen. Dies kann jedoch auch von bestimmten Bedingungen Ihrer Stildeklarationen abhängen (z. B. wenn Sie nur die überschreiben müssen, wenn Sie background-colorandere verwandte background-*Eigenschaften von einem übergeordneten Element erben , oder wenn Sie alle Werte entfernen müssen außer dem background-color).

Fabrizio Calderan
quelle
Ist backgroundalso nur eine Verknüpfung für eines der 5 Attribute? Daher im wirklichen Leben nicht praktikabel, wenn Hintergrundposition, Farbe und Bild vorhanden sind?
Stanigator
16
Dies ist sehr praktisch, da Sie alle diese Attribute in einer Zeile angeben können . Siehe die offizielle Dokumentation
Christian
3
da ist ein Unterschied. Ich habe ein Div mit transparenten Lücken zwischen seinen untergeordneten Elementen, wenn Hintergrundfarbe verwendet wird. aber es ist völlig solide, wenn ich nur Hintergrund benutze. Es gibt einen nachweisbaren Unterschied in ihren Eigenschaften oder ihrem Verhalten.
user1873073
2
Fwiw, aus dem Link von @ ChristianVarga: Die Eigenschaft 'background' ist eine Abkürzungseigenschaft zum Festlegen der einzelnen Hintergrundeigenschaften (dh 'Hintergrundfarbe', 'Hintergrundbild', 'Hintergrundwiederholung', 'Hintergrundanhang' und ' Hintergrundposition ') an derselben Stelle im Stylesheet. Bei einer gültigen Deklaration setzt die Eigenschaft 'background' zuerst alle einzelnen Hintergrundeigenschaften auf ihre Anfangswerte und weist dann explizite Werte zu, die in der Deklaration angegeben sind. Beispiel gegeben:P { background: url("chess.png") gray 50% repeat fixed }
Ruffin
Weitere Informationen unter developer.mozilla.org/en-US/docs/Web/CSS/background
MarcoZen
157

backgroundwird supercede alle bisherigen background-color, background-imageetc. Spezifikationen. Es ist im Grunde eine Abkürzung, aber auch ein Zurücksetzen .

Ich werde es manchmal verwenden, um frühere backgroundSpezifikationen in Vorlagenanpassungen zu überschreiben , wo ich Folgendes möchte:

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

um folgendes zu sein:

background: black;

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

Anriëtte Myburgh
quelle
12
Dies ist eine vollständigere Antwort, der Reset-Teil ist ein sehr wichtiger Unterschied.
Draken
1
developer.mozilla.org/en-US/docs/Web/CSS/background -> Wie bei allen CSS-Kurzschrift-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Anfangswert gesetzt.> Hintergrundbild: keine Hintergrundposition: 0% 0% Hintergrundgröße: Auto Auto Hintergrund-Wiederholung: Wiederholung Hintergrund-Ursprung: Padding-Box Hintergrund-Clip: Border-Box Hintergrund-Anhang:
Bildlauf
85

Informationen zur CSS-Leistung :

backgroundvs background-color:

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

Hintergrund gegen Hintergrundfarbe

Während diese Zahlen von einem einzelnen Seiten-Reload stammen, haben sich bei nachfolgenden Aktualisierungen die Renderzeiten geändert, aber der prozentuale Unterschied war im Grunde jedes Mal der gleiche.

Dies entspricht einer Einsparung von fast 42,6 ms, fast doppelt so schnell , wenn in Safari 7.0.1 Hintergrund anstelle von Hintergrundfarbe verwendet wird. Chrome 33 scheint ungefähr gleich zu sein.

Das hat mich ehrlich gesagt umgehauen, weil es aus zwei Gründen am längsten gedauert hat:

  • Normalerweise argumentiere ich immer für explizite Aussagen in CSS-Eigenschaften, insbesondere mit Hintergründen, da dies die Spezifität in der Zukunft nachteilig beeinflussen kann.
  • Ich dachte, wenn ein Browser sieht background: #000;, sieht er wirklich background: #000 none no-repeat top center;. Ich habe hier keinen Link zu einer Ressource, aber ich erinnere mich, dass ich das irgendwo gelesen habe.

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

l2aelba
quelle
13
Ich bin dafür hierher gekommen - wirklich sehr, sehr überrascht von den Ergebnissen. Danke für diese Antwort.
Mave
Können Sie auch sagen, dass alle CSS-Abkürzungen aufgrund der besseren Leistung bevorzugter sind?
Levent Divilioglu
5
@LeventDivilioglu Wie Tester sagte: 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
l2aelba
24

Mit können backgroundSie alle backgroundEigenschaften einstellen wie:

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

Mit können background-colorSie einfach die Farbe des Hintergrunds angeben

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: Hintergrund - Kurzschrift-Eigenschaft)

Alphanyx
quelle
7

Einer der Unterschiede:

Wenn Sie auf diese Weise ein Bild 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, entspricht dies der Hintergrundfarbe und kann überschrieben werden.

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

Ankit
quelle
3

Sie sind beide gleich. Es gibt mehrere Hintergrund - Selektoren (dh background-color, background-image, background-position) und man kann sich entweder Zugriff durch den einfacheren backgroundWähler oder die spezielleren ein. Zum Beispiel:

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

oder

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

Der Unterschied besteht darin, dass die backgroundShorthand-Eigenschaft mehrere hintergrundbezogene Eigenschaften festlegt. Sie werden alle festgelegt, auch wenn Sie nur einen Farbwert angeben, da dann die anderen Eigenschaften auf ihre Anfangswerte gesetzt werden, z. B. background-imageaufnone . .

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 Kurzschrift tendenziell etwas sicherer. Dies ist eine Vorsichtsmaßnahme (nicht vollständig, aber nützlich), um zu verhindern, dass versehentlich unerwartete Hintergrundeigenschaften wie ein Hintergrundbild von einem anderen Stylesheet abgerufen werden. Außerdem ist es kürzer. Sie müssen sich jedoch daran erinnern, dass dies wirklich bedeutet, dass alle Hintergrundeigenschaften festgelegt werden.

Jukka K. Korpela
quelle
2

Es gibt keinen Unterschied. Beide funktionieren auf die gleiche Weise.

CSS-Hintergrundeigenschaften werden verwendet, um die Hintergrundeffekte eines Elements zu definieren.

CSS-Eigenschaften für Hintergrundeffekte:

  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrund Wiederholung
  • Hintergrund-Anhang
  • Hintergrundposition

Die Hintergrundeigenschaft enthält alle diese Eigenschaften, und Sie können sie einfach in eine Zeile schreiben.

Chuck Norris
quelle
1

Dies ist die beste Antwort. Kurzschrift (Hintergrund) ist für Reset und DRY (mit Langhand kombinieren).

Jonh Doe
quelle
1

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

Ich habe das CSS-Leistungsexperiment neu erstellt und die Ergebnisse sind heutzutage erheblich unterschiedlich.

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.

Marcin Biernacki
quelle
1

backgroundist die Abkürzung für background-colorund einige andere Hintergrundinformationen wie folgt :

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

Lesen Sie die folgende Erklärung von W3C:

Hintergrund - Kurzschrift Eigentum

Um den Code zu verkürzen, können Sie auch alle Hintergrundeigenschaften in einer einzigen Eigenschaft angeben. Dies wird als Kurzform bezeichnet.

Die Abkürzungseigenschaft für Hintergrund ist Hintergrund:

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

Bei Verwendung der Shorthand-Eigenschaft lautet die Reihenfolge der Eigenschaftswerte:

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

Es spielt keine Rolle, ob einer der Eigenschaftswerte fehlt, solange die anderen in dieser Reihenfolge sind.

Alireza
quelle
1

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

Das funktioniert:

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

Das geht nicht:

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

background ist eine Abkürzung für Folgendes:

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

Detaillierte Informationen zu jeder Immobilie finden Sie hier

Eigenschaften Reihenfolge

Bei den meisten Browserimplementierungen (ich denke, ältere Browser könnten Probleme verursachen) spielt die Reihenfolge der Eigenschaften keine Rolle, außer:

  • background-originund background-clip: Wenn diese beiden Eigenschaften vorhanden sind, beziehen sich die erste auf -originund die zweite auf -clip.

    Beispiel:

    background: content-box green padding-box;

    Ist äquivalent zu:

    background-origin: content-box;
    background-color: green;
    background-clip: padding-box;
  • background-sizemuss immer folgen background-positionund die Eigenschaften müssen durch getrennt werden/

  • Wenn background-positiones aus zwei Zahlen besteht, ist die erste der horizontale Wert und die zweite der vertikale Wert.

Greedo
quelle
0

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

/*works*/
background: gray;

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

Sie können einige ziemlich nette Sachen machen, sobald Sie verstanden haben, dass Sie damit mit der Vererbung spielen können. Lassen Sie uns jedoch zuerst etwas aus diesem Dokument im Hintergrund verstehen :

Mit CSS3 können Sie Elemente mit mehreren Hintergründen versehen. Diese sind übereinander geschichtet, wobei der erste Hintergrund oben und der letzte Hintergrund hinten aufgeführt sind. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.

Also, wenn man es tut:

background: red;

Er setzt die Hintergrundfarbe auf Rot, weil Rot der letzte aufgeführte Wert ist.

Wenn man es tut:

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

Rot ist wieder die Hintergrundfarbe, ABER Sie sehen einen Farbverlauf.

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

Nun das gleiche 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 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 (dann erhalten wir den Farbverlauf) oder der Hintergrundfarbe erben, erhalten wir Rot.

Ced
quelle
-2

Eine Sache, die mir aufgefallen ist und die ich in der Dokumentation nicht sehe, ist die Verwendung background: url("image.png")

kurze Hand wie oben, wenn das Bild nicht gefunden wird, sendet es einen 302-Code, anstatt ignoriert zu werden, wie es ist, wenn Sie verwenden

background-image: url("image.png") 
Bigwater
quelle
-2

Es gibt einen Fehler in Bezug auf Hintergrund und Hintergrundfarbe

Der Unterschied besteht darin, dass bei Verwendung des Hintergrunds manchmal beim Erstellen einer Webseite im CSS-Hintergrund: #fff // einen Block des Maskenbilds ("oberstes Element, Text oder Bild") überschreiben kann. Daher ist es besser, immer den Hintergrund zu verwenden. Farbe für den sicheren Gebrauch, in Ihrem Design, wenn es individuell ist

user8505560
quelle
Entschuldigung, das macht keinen Sinn. Können Sie Ihre Antwort bearbeiten, um mehr darüber zu erfahren?
Syfer