CSS Farbe vs. Hintergrundfarbe vs. Hintergrund?

78

Wann verwende ich in HTML Farbe und was ist der Unterschied zwischen der Hintergrundfarbe und dem Hintergrund-Tag?

Was sind die Unterschiede?

html css Doggo
quelle
2
Willkommen Ivo. Lesen Sie, wie man fragt - Suchen und Forschen zuerst, wie @Barthy vorschlägt
micstr
2
@ Barthy Genau deshalb wurde es herabgestimmt. Es zeigt mangelnde Forschung.
Dalija Prasnikar
6
Nur weil etwas woanders dokumentiert ist, heißt das nicht, dass Sie auf SO
Dave Cousineau
1
@ DaveCousineau Es wurde abgelehnt, wie Dalija Prasnikar sagte, weil es einen Mangel an Ressourcen zeigt und in der ( stackoverflow.com/help/how-to-ask ) heißt es, dass Sie einige Nachforschungen anstellen sollten.
Doggo
Dies ist das Top-Ergebnis für die Frage und ich benutze duckduckgo. Also ja, ein paar Sekunden Internet-Suche bringen jemanden hierher und das ist keine schlechte Sache.
Matt

Antworten:

136

color bezieht sich auf die Textfarbe in diesem Element.

background-color bezieht sich auf die Hintergrundfarbe

background ist eine Abkürzung, um viele Hintergrund-Tags in einer Zeile zu kombinieren.

background: #ffffff url("img_tree.png") no-repeat right top;

Kombiniert Farb-, Bild- und Hintergrundbildeigenschaften in einer Zeile, anstatt jeden Stil einzeln einzugeben.

w3schools

Thomas Byy
quelle
5
Ein Lehrer ist da, um uns zu erzählen, wie es gemacht wird, und um Zweifel von jedem zu lösen, der die Bücher liest: Geben Sie einfache Antworten auf einfache Fragen. Aber nicht jeder kann für einen guten Lehrer bezahlen. Für mich ist es wichtig zu lernen, und es ist nicht alltäglich, dass wir Zeit und Energie haben, um verborgene Antworten zu finden. Wenn Ihre Abteilung richtig wäre, hätte diese Seite nicht viel Wert.
Rodrigo
5

Ich werde Ihnen ein Beispiel mit diesem HTML-Element geben:

<span class="value"> This is my text </span>

.value { color: red, background-color: black}

Die CSS-Farbe wird verwendet, um die Textfarbe eines HTML-Elements zu ändern. In diesem Beispiel wäre "Dies ist mein Text" rot. Die CSS-Hintergrundfarbe wird verwendet, um die Hintergrundfarbe zu ändern. In diesem Fall erhalten Sie eine schwarze Box mit rotem Text. Schließlich wird der Hintergrund verwendet, um alle Hintergrundeigenschaften in einer Deklaration festzulegen. Zum Beispiel:

background: #00ff00 url("smiley.gif") no-repeat fixed center;

Dies ändert die Hintergrundfarbe, fügt das Bild "smiley.gif" zum Hintergrund hinzu und zentriert das Bild. Es wiederholt das Bild nicht, wenn es Platz hat.

Juan Pablo
quelle
4

Schnelle Antwort

  • Farbe = Textfarbe
  • Hintergrundfarbe = die Farbe des Hintergrunds
  • Hintergrund = gibt Ihnen die Möglichkeit, Farbe, Bild usw. einzustellen ...

Tolle Tutorials dazu finden Sie hier

Trocknet Peeters
quelle
2

Es ist wahr, dass backgroundes mehr Optionen gibt als background-color. Wenn Sie jedoch nur die Hintergrundfarbe festlegen müssen, sind diese genau gleich und überschreiben die anderen, wie im Snippet dargestellt.

background: yellow;

background-color: yellow;


.bc {
  background: yellow;
  background-color: green;
}

.bc2 {
  background-color: green;
  background: yellow;
}
<div class='bc'>
  bc { background:yellow; background-color:green; }
</div>

<div class='bc2'>
  bc { background-color:green; background:yellow; }
</div>
Erweitern Sie das Snippet

Steven Spungin
quelle
2

Eine große Sache bei diesen beiden CSS-Eigenschaften ist, dass eine Hintergrundfarbe ein Bild oder einen Verlauf, der damit festgelegt wurde, nicht überschreibt:

background:url('https://example.com/image.jpg');

oder

 background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%);

Wenn Sie versuchen, den Hintergrund von einem Bild in eine Farbe zu ändern, müssen Sie die Eigenschaft background verwenden.

Ifbi dev
quelle