So ändern Sie die Hintergrundfarbe mit CSS

Eskere Guru

Einer der aufregendsten Momente in der Karriere eines angehenden Front-End-Entwicklers ist das Erlernen des Änderns der Hintergrundfarbe einer Webseite.

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

In diesem Handbuch erfahren Sie alles, was Sie zum Ändern der Hintergrundfarbe mit CSS wissen müssen.

Richten Sie sich ein

Lassen Sie uns ein wenig Vorarbeit ausschalten.

Hinweis : Ich empfehle, Visual Studio Code mit der Live Server-Erweiterung zu verwenden, um Änderungen in Echtzeit anzuzeigen, wenn Sie HTML und CSS aktualisieren.

  1. Erstellen Sie einen Ordner für die Dateien Ihres Projekts.
  2. Erstellen Sie eine index.html- Datei, in der sich Ihr HTML- Code befindet . Sie können Boilerplate-Code verwenden oder einfach einige <html> – , <head> – und <body> -Tags einrichten.
  3. Erstellen Sie eine styles.css- Datei für Ihr CSS.
  4. Verknüpfen Sie Ihre CSS-Datei mit dem HTML- Code, indem Sie <link rel = "stylesheet" href = "styles.css"> in die <head> -Tags einfügen .

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

Verwandte: So erstellen Sie eine Boilerplate-Website

So ändern Sie die Hintergrundfarbe mit CSS

So ändern Sie die Hintergrundfarbe mit CSS - css background before change

Der einfachste Weg, die Hintergrundfarbe zu ändern, besteht darin, auf das Body- Tag zu zielen. Bearbeiten Sie dann die Eigenschaft Hintergrundfarbe . Sie können Farbcodes finden, indem Sie nach der Browsererweiterung von Google Color Picker suchen und diese verwenden

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

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

So ändern Sie die Hintergrundfarbe mit CSS - css background light blue

Die Eigenschaft Hintergrundfarbe akzeptiert Farben in sechs verschiedenen Formen:

  • Name : hellblau; (für eine genaue Annäherung)
  • Hex-Code : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); wobei a Alpha ist (Deckkraft)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); wobei a Alpha ist (Deckkraft)

Verwenden Sie die Kurzschrift- Hintergrundeigenschaft anstelle der Hintergrundfarbe , um zusätzlichen Code auszuschneiden. Mit dieser Methode können Sie die Hintergrundfarbe eines HTML-Elements ändern.

Erstellen Sie ein <div> -Element und geben Sie ihm eine Klasse. In diesem Fall ist die Klasse panel . Legen Sie die Eigenschaften für Höhe und Breite in CSS fest. 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 sehen Sie, dass die Eigenschaft body background unabhängig von der Eigenschaft .panel background gestaltet ist .

So ändern Sie die Hintergrundfarbe mit CSS - css background with panel

Die Hintergrundeigenschaft 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%);
 }

CSS-Verlaufshintergrund mit Panel So ändern Sie das Hintergrundbild in CSS

Was ist, wenn der Hintergrund eher ein Bild als eine Volltonfarbe oder ein Farbverlauf sein soll? Die Kurz Hintergrund Eigenschaft 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 und nicht nur den Namen verwenden:

 body {
 background: url(leaves-and-trees.jpg)
 }
So ändern Sie die Hintergrundfarbe mit CSS - css background trees closeup

Whoah! Sieht so aus, als wäre das Bild viel zu vergrößert. Sie können dies mit der Eigenschaft " Hintergrundgröße" beheben.

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

Um die Kurz Hintergrund Eigenschaft in Verbindung mit der Abdeckung Hintergrund-size – Eigenschaft zu verwenden, müssen Sie auch Hintergrund-Position Eigenschaften angeben und die Werte mit einem Backslash getrennt (Auch wenn es sich um Standardpositionswerte handelt, z. B. oben links .)

 body {
 background: url(leaves-and-trees.jpg) top left / cover;
 }
So ändern Sie die Hintergrundfarbe mit CSS - css background image properly sized

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

Lesen Sie mehr: So legen Sie ein Hintergrundbild in CSS fest

Hinweis : Seien Sie vorsichtig, wenn Sie große Hintergrundbilder einfügen, die viel Speicherplatz beanspruchen. Es kann schwierig sein, diese auf Mobilgeräten zu laden, wenn Sie zwei Sekunden Zeit haben, um den 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 Hintergrundfarbe und Hintergrundbild alte Nachrichten. 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!