So ändern Sie die Hintergrundfarbe mit CSS

So ändern Sie die Hintergrundfarbe mit CSS

Einer der aufregendsten Momente in der Karriere eines angehenden Frontend-Entwicklers besteht darin, zu lernen, wie man die Hintergrundfarbe einer Webseite ändert.





Die Arbeit mit HTML ist großartig und alles, aber mit nur wenigen CSS-Zeilen können Sie Ihre Seiten und Ihre Programmierreise zum Leben erwecken.





In dieser Anleitung erfahren Sie alles, was Sie wissen müssen, um die Hintergrundfarbe mit CSS zu ändern.





Einrichten

Lassen Sie uns ein wenig Vorarbeit leisten.

Kann ich mit Exodus in Schwierigkeiten geraten?

Notiz : Ich empfehle die Verwendung von Visual Studio-Code mit dem Live-Server-Erweiterung um Änderungen in Echtzeit anzuzeigen, während Sie HTML und CSS aktualisieren.



  1. Erstellen Sie einen Ordner für die Dateien Ihres Projekts.
  2. Erstelle ein index.html Datei, um Ihr HTML zu beherbergen. Sie können Boilerplate-Code verwenden oder einfach etwas einrichten , , und Stichworte.
  3. Ein ... kreieren stile.css Datei für Ihr CSS.
  4. Verknüpfen Sie Ihre CSS-Datei mit dem HTML, indem Sie platzieren innerhalb der Stichworte.

Jetzt können Sie mit der Bearbeitung des CSS beginnen.

Verwandt: So erstellen Sie eine Boilerplate-Website





So ändern Sie die Hintergrundfarbe mit CSS

Die einfachste Möglichkeit, die Hintergrundfarbe zu ändern, besteht darin, auf die Karosserie Schild. Bearbeiten Sie dann die Hintergrundfarbe Eigentum. Sie können Farbcodes finden, indem Sie nach der Browsererweiterung Google Color Picker suchen und diese verwenden

body {
background-color: rgb(191, 214, 255);
}

Dieser Code ändert den Hintergrund in ein schönes Hellblau.





Die Hintergrundfarbe Eigenschaft akzeptiert Farben in sechs verschiedenen Formen:

  • Name : hellhimmelblau; (für eine enge Annäherung)
  • Hex-Code : # bfd6ff;
  • rgb : rgb(191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); wo zu ist Alpha (Undurchsichtigkeit)
  • HSL : hsl(218°, 100%, 87%);
  • HSLA : hsla (218 °, 100 %, 87 %, 1); wo zu ist Alpha (Undurchsichtigkeit)

Verwenden Sie die Kurzschrift Hintergrund Eigentum an Stelle von Hintergrundfarbe Extra-Code zu schneiden. Mit dieser Methode können Sie die Hintergrundfarbe jedes HTML-Elements ändern.

Ein ... kreieren -Element und geben Sie ihm eine Klasse – in diesem Fall ist die Klasse Panel . Stellen Sie es ein Höhe und Breite Eigenschaften in CSS. Wählen Sie das Element in CSS aus und färben Sie es weg.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Hier seht ihr die Karosserie Hintergrund Eigenschaft wird unabhängig von der gestylt .panel Hintergrund Eigentum.

Die Eigenschaft background akzeptiert auch Farbverläufe:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

So ändern Sie das Hintergrundbild in CSS

Was ist, wenn der Hintergrund ein Bild und nicht eine Volltonfarbe oder ein Farbverlauf sein soll? Die Kurzschrift Hintergrund Eigentum ist ein vertrauter Freund.

Stellen Sie sicher, dass sich das Bild im selben Ordner wie Ihre HTML- und CSS-Dateien befindet. Andernfalls müssen Sie den Dateipfad in Klammern anstelle des Namens verwenden:

body {
background: url(leaves-and-trees.jpg)
}

Boah! Sieht so aus, als ob das Bild viel zu stark vergrößert ist. Das kannst du mit dem beheben Hintergrundgröße Eigentum.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Um die Kurzschrift zu verwenden Hintergrund Eigentum in Verbindung mit der Hintergrundgröße Eigentum Startseite , müssen Sie auch angeben Hintergrundposition Eigenschaften und trennen Sie die Werte mit einem Backslash (auch wenn es sich um standardmäßige Positionswerte wie handelt oben links .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Los geht's! Ein Hintergrundbild in der richtigen Größe in einer CSS-Zeile.

Weiterlesen: So legen Sie ein Hintergrundbild in CSS fest

Notiz : Seien Sie vorsichtig bei großen Hintergrundbildern, die viel Speicherplatz beanspruchen. Diese können auf Mobilgeräten schwer zu laden sein, da Sie nur zwei Sekunden Zeit haben, um Benutzern einen Grund zu geben, auf der Seite zu bleiben.

Verbessern Sie Ihr CSS-Spiel mit CSS box-shadow

Für einen Entwickler wie Sie sind die Eigenschaften von Hintergrundfarbe und Hintergrundbild eine alte Neuigkeit. Zum Glück gibt es immer etwas Neues zu lernen.

Versuchen Sie, Ihren Boxen mit CSS box-shadow einen Schub zu geben. Ihre HTML-Elemente haben noch nie besser ausgesehen!

Teilen Teilen Tweet Email So verwenden Sie CSS box-shadow: 13 Tricks und Beispiele

Fade Boxen sehen langweilig aus. Peppen Sie sie mit dem CSS-Box-Shadow-Effekt auf!

Weiter lesen
Verwandte Themen
  • Programmierung
  • Web Entwicklung
  • Web-Design
  • CSS
Über den Autor Marcus Mears III(26 veröffentlichte Artikel)

Marcus ist ein lebenslanger Technologie-Enthusiast und Writer Editor bei MUO. Er begann seine Karriere als freiberuflicher Autor im Jahr 2020 und deckte Trendtechnologien, Gadgets, Apps und Software ab. Er hat am College Informatik mit dem Schwerpunkt Front-End-Webentwicklung studiert.

Mehr von Marcus Mears III

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren