Inhalt

• Schreiten
• Methode 1 von 4: Festlegen einer festen Hintergrundfarbe
• Methode 2 von 4: Verwenden eines Bildes als Hintergrund
• Methode 3 von 4: Erstellen Sie einen Verlaufshintergrund
• Methode 4 von 4: Legen Sie eine Farbanimation als Hintergrundbild fest

Um den Hintergrund einer Webseite in HTML festlegen zu können, müssen Sie nur eine kleine Änderung am "body" -Element innerhalb von vornehmen Stil> / Stil> Stichworte. Die Schritte hängen davon ab, wie Ihr Hintergrundbild aussehen soll. Erfahren Sie, wie Sie den Hintergrund Ihrer Website als Vollton-, Bild-, Verlaufs- oder Farbanimation festlegen.

Schreiten

Methode 1 von 4: Festlegen einer festen Hintergrundfarbe

1. Öffnen Sie Ihre HTML-Datei in Ihrem bevorzugten Texteditor. Ab HTML5 wird das HTML-Attribut bgcolor> nicht mehr unterstützt. Die Hintergrundfarbe muss wie alle anderen Stilaspekte Ihrer Seite mit CSS festgelegt werden.
2. Ergänzen Sie die Stil> / Stil> markiert Ihr Dokument. Alle Stildaten für Ihre Seite (einschließlich der Hintergrundfarbe) sollten in diesen Tags codiert sein. Haben Sie die Stil> Tags bereits angezeigt, dann können Sie einfach zu diesem Teil der Datei scrollen.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Geben Sie das Element "body" in das Feld ein Stil> / Stil> Stichworte. Alles, was Sie in CSS am "body" -Element ändern, wirkt sich auf die gesamte Seite aus.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Fügen Sie dem Element "body" die Eigenschaft "background-color" hinzu. In diesem Zusammenhang funktioniert nur eine Schreibweise von "Farbe" (nicht: Farbe).

   ! DOCTYPE html> html> head> style> body {Hintergrundfarbe:} / style> / head> body> / body> / html>

5. Platzieren Sie die gewünschte Hintergrundfarbe hinter "Hintergrundfarbe". Sie können jetzt den Namen einer Farbe angeben (Grün, Blau, edusw.) Hexadezimalcodes (z. B.) verwenden (z. #000000 für schwarz, # ff0000 für Rot usw.) oder durch Eingabe des RGB-Werts für die Farbe (z rgb (255,255,0) für gelb). Unten sehen Sie ein Beispiel mit hexadeximalen Codes, wobei der Hintergrund dem wikiHow-Banner entspricht:

   ! DOCTYPE html> html> Kopf> Stil> Körper {Hintergrundfarbe: # 93B874; } / style> / head> body> / body> / html>

   • Weiß: #FFFFFF
   • Hell-Pink: # FFCCE6
   • Gebrannte Siena: #993300
   • Indigo - # 4B0082
   • Violett - # EE82EE
   • Schauen Sie sich den HTML-Farbwähler von w3schools.com an, um die Hex-Codes aller gewünschten Farben zu finden.
6. Verwenden Sie "Hintergrundfarbe", um Hintergrundfarben auf andere Elemente anzuwenden. Genau wie Sie das Körperelement festlegen, können Sie die Hintergrundfarbe verwenden, um die Hintergründe anderer Elemente festzulegen. Platzieren Sie diese Elemente einfach in der Stil> / Stil> mit der Eigenschaft Hintergrundfarbe.

   ! DOCTYPE html> html> Kopf> Stil> Körper {Hintergrundfarbe: # 93B874; } h1 {Hintergrundfarbe: orange; } p {Hintergrundfarbe: rgb (255,0,0); } / style> / head> body> h1> Dieser Header erhält einen orangefarbenen Hintergrund / h1> p> Dieser Absatz erhält einen roten Hintergrund / p> / body> / html>

Methode 2 von 4: Verwenden eines Bildes als Hintergrund

1. Öffnen Sie die HTML-Datei in einem Texteditor. Viele Menschen bevorzugen es, ein Bild als Hintergrund für ihre Website zu verwenden. Hiermit können Sie ein Muster, eine Textur, ein Foto oder ein anderes Bild als Hintergrund festlegen. Ab HTML5 müssen alle Hintergründe mit CSS (Cascading Style Sheets) innerhalb von festgelegt werden Stil> / Stil> Stichworte.
2. Ergänzen Sie die Stil> / Stil> Tags zu Ihrer HTML-Datei. Alle Stildaten für Ihre Seite (einschließlich der Hintergrundfarbe) sollten in diesen Tags angegeben werden. Haben Sie schon Stil> Tags gesetzt, scrollen Sie zu diesem Teil der Datei.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Geben Sie das Element "body" in das Feld ein Stil> / Stil> Stichworte. Alles, was Sie in CSS am Element "body" ändern, wirkt sich auf die gesamte Seite aus.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Fügen Sie dem Element "body" die Eigenschaft "background-image" hinzu. Wenn Sie diese Eigenschaft hinzufügen, benötigen Sie den Dateinamen Ihres Bildes. Stellen Sie sicher, dass das Bild im selben Ordner wie die HTML-Datei gespeichert ist (oder fügen Sie den vollständigen Pfad zur Datei zu Ihrem Webserver hinzu).

   ! DOCTYPE html> html> head> style> body {Hintergrundbild: URL ("imagename.png"); Hintergrundfarbe: # 93B874; } / style> / head> body> / body> / html>

   • Es ist eine gute Idee, den Code einzuschließen Hintergrundfarbe Nur für den Fall, dass das Hintergrundbild nicht geladen wird.
5. Überlagern Sie mehrere Bilder. Sie können mehrere Bilder übereinander stapeln. Dies kann nützlich sein, wenn Sie Bilder mit transparentem Hintergrund haben, die sich bei Überlagerung ergänzen.

   ! DOCTYPE html> html> head> style> body {Hintergrundbild: URL ("image1.png"), URL ("image2.gif"); Hintergrundfarbe: # 93B874; } / style> / head> body> / body> / html>

   • Das erste Bild ist oben. Das zweite Bild befindet sich unter dem ersten.

Methode 3 von 4: Erstellen Sie einen Verlaufshintergrund

1. Verwenden Sie CSS, um einen Verlaufshintergrund zu erstellen. Wenn Sie nach etwas suchen, das etwas stilisierter ist als eine Volltonfarbe, aber nicht so beschäftigt wie eine Farbanimation, versuchen Sie es mit einem Verlaufshintergrund. Farbverläufe sind Farben, die sich zu anderen Gleichheiten ändern. Sie können CSS verwenden, um Ihren Verlauf zu erstellen und anzupassen. Bevor Sie mit dem Erstellen eines Farbverlaufs beginnen, sollten Sie sich mit den Grundlagen der Formatierung einer Webseite mit CSS vertraut machen.
2. Verstehen Sie die Standardsyntax. Beim Erstellen eines Verlaufs benötigen Sie zwei Informationen: den Startpunkt und den Startwinkel sowie die Farben, zwischen denen der Übergang stattfinden wird. Sie können mehrere Farben auswählen, die sich alle überlappen, und Sie können eine Richtung oder einen Winkel für den Verlauf angeben.

   Hintergrund: linearer Gradient (Richtung / Winkel, Farbe1, Farbe2, Farbe3 usw.);

3. Erstellen Sie einen vertikalen Farbverlauf. Wenn Sie keine Richtung angeben, läuft die Farbe von oben nach unten. Verschiedene Browser haben unterschiedliche Versionen der Verlaufsfunktion, daher müssen Sie unterschiedliche Versionen des Codes hinzufügen.

   ! DOCTYPE html> html> head> style> html {Mindesthöhe: 100%; / * Dies ist erforderlich, um sicherzustellen, dass sich der Verlauf über den gesamten Seitenkörper erstreckt. * /} Body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / Hintergrund: -o-linearer Gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / Hintergrund: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / Hintergrund: linearer Gradient (# 93B874, # C9DCB9); / * Standardsyntax (muss die letzte sein) * / Hintergrundfarbe: # 93B874; / * Es ist eine gute Idee, eine Hintergrundfarbe festzulegen, falls der Verlauf nicht geladen wird * /} / style> / head> body> / body> / html>

4. Erstellen Sie einen Farbverlauf mit einer Richtung. Durch Hinzufügen einer Richtung zum Verlauf können Sie die Art und Weise anpassen, in der sich die Farbe verschiebt. Beachten Sie, dass verschiedene Browser Richtungen unterschiedlich interpretieren. Sie zeigen alle den gleichen Farbverlauf.

   ! DOCTYPE html> html> head> style> html {Mindesthöhe: 100%; } body {background: -webkit-linear-gradient (links, # 93B874, # C9DCB9); / * von links nach rechts * / Hintergrund: -o-linearer Gradient (rechts, # 93B874, # C9DCB9); / * Ende rechts * / Hintergrund: -moz-linear-gradient (rechts, # 93B874, # C9DCB9); / * rechts enden * / Hintergrund: linearer Farbverlauf (rechts # 93B874, # C9DCB9); / * bewegt sich nach rechts * / Hintergrundfarbe: # 93B874; / * Es ist eine gute Idee, eine Hintergrundfarbe festzulegen, falls der Verlauf nicht geladen wird * /} / style> / head> body> / body> / html>

5. Verwenden Sie andere Eigenschaften, um den Farbverlauf anzupassen. Mit Farbverläufen können Sie viel mehr tun.
   • Sie können beispielsweise nicht nur mehr als zwei Farben verwenden, sondern auch jeweils einen Prozentsatz dahinter setzen. Hiermit können Sie angeben, wie viel Platz jedes Farbsegment erhalten soll.

     Hintergrund: linearer Gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Fügen Sie den Farben Transparenz hinzu. Mit diesem können Sie die Farben verblassen. Verwenden Sie dieselbe Farbe, um von der Farbe zu nichts zu verblassen. Sie werden die Funktion lieben rgba () muss verwenden, um die Farbe anzuzeigen. Der Endwert bestimmt den Transparenzgrad: 0 für undurchsichtig und 1 für transparent.

     Hintergrund: linearer Gradient (rechts rgba (147, 184, 116,0), rgba (147, 184, 116,1));

Methode 4 von 4: Legen Sie eine Farbanimation als Hintergrundbild fest

1. Navigieren Sie zu Stil> in Ihrem HTML-Code. Wenn Sie eine feste Hintergrundfarbe finden, aber nicht, experimentieren Sie mit dem Ändern der Farbhintergründe. Ab HTML 5 müssen Hintergrundfarben mit CSS (Cascading Style Sheets) definiert werden. Wenn Sie mit CSS noch nie eine Hintergrundfarbe festgelegt haben, lesen Sie den Abschnitt zum Festlegen einer festen Hintergrundfarbe, bevor Sie diese Methode ausprobieren.
2. Fügen Sie die Eigenschaft hinzu Animation zum "Körper" -Element. Sie müssen 2 verschiedene Eigenschaften hinzufügen, da jeder Browser anderen Code benötigt.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: Farbwechsel 60er Jahre unendlich; Animation: Farbwechsel 60er Jahre unendlich; } / style> / head> body> / body> / html>

   • -webkit-animation Die Eigenschaft ist für Chrome-basierte Browser (Chrome, Opera, Safari) erforderlich. Animation ist der Standard für alle anderen Browser.
   • Farbwechsel wird in diesem Beispiel als Animation bezeichnet.
   • 60er Jahre ist die Dauer (60 Sekunden) der Animation / des Übergangs. Stellen Sie sicher, dass dies sowohl für das Webkit als auch für die Standardsyntax festgelegt ist.
   • unendlich gibt an, dass die Animation auf unbestimmte Zeit wiederholt werden soll. Wenn Sie es vorziehen, die Farben zu schleifen und dann bei der letzten Farbe anzuhalten, können Sie diesen Teil weglassen.
3. Fügen Sie Ihrer Animation Farben hinzu. Jetzt verwenden Sie die @ keyframes-Regel, um die Hintergrundfarben festzulegen, die durchlaufen werden sollen, sowie wie lange jede Farbe auf der Seite angezeigt werden soll. Auch hier müssen Sie mehrere Codierungen für die verschiedenen Browser hinzufügen.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: Farbwechsel 60er Jahre unendlich; Animation: Farbwechsel 60er Jahre unendlich; } @ -webkit-keyframes Farbwechsel {0% {Hintergrund: # 33FFF3;} 25% {Hintergrund: # 78281F;} 50% {Hintergrund: # 117A65;} 75% {Hintergrund: # DC7633;} 100% {Hintergrund: # 9B59B6;}} @keyframes Farbwechsel {0% {Hintergrund: # 33FFF3;} 25% {Hintergrund: # 78281F;} 50% {Hintergrund: # 117A65;} 75% {Hintergrund: # DC7633;} 100% {Hintergrund: # 9B59B6;}} / style> / head> body> / body> / html>

   • Beachten Sie, dass die beiden Zeilen (@ -webkit-keyframes und @keyframes haben die gleichen Werte für die Hintergrundfarben und Prozentsätze. Es sollte einheitlich bleiben, damit die Erfahrung für alle Browser gleich bleibt.
   • Die Prozentsätze (0%, 25%usw.) stellen die Gesamtdauer der Animation dar (60er Jahre). Wenn die Seite geladen wird, wird für den Hintergrund die Farbe eingestellt 0% und (# 33FFF3). Wenn 25% oder 60 Sekunden der Animation abgespielt wurden, wechselt der Hintergrund zu # 78281F, und so weiter.
   • Sie können die Dauer und die Farben nach Wunsch anpassen.