Wie kann man die Hintergrundfarbe in HTML festlegen
Es gibt 3 Typen von HTML-Farben: Hex-Farbcodes, HTML-Farbnamen und RGB-Werte. Um Ihre bevorzugte Farbe auszuwählen, verwenden Sie unser Werkzeug Farbwähler.
Beginnen wir mit dem einfachsten Weg, eine Hintergrundfarbe einzustellen:
1. Fügen Sie der Eigenschaft background-color zum Element <body> hinzu
Die Eigenschaft background-color dient dazu, die Hintergrundfarbe zu ändern. Wenn Sie es ins Element <body> einfügen, erhalten Sie ein vollfarbiges Cover der Seite.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-color: #1c87c9;
}
</style>
</head>
<body></body>
</html>Sie können auch eine Hintergrundfarbe für bestimmte Elemente in Ihrem Dokument hinzufügen. Zum Beispiel, lassen Sie uns sehen, wie man die Farbe der Überschrift und der Absätze ändern kann.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {background-color:#e6ebef;}
h2 {background-color:#8ebf42;}
p {background-color:#1c87c9;}
</style>
</head>
<body>
<h2>Eine Überschrift mit grünem Hintergrund.</h2>
<p>Ein Absatz mit blauem Hintergrund.</p>
</body>
</html>2. Fügen Sie das Attribut style zum Element <body>
Es ist auch möglich, eine Hintergrundfarbe für ein HTML-Dokument festzulegen, indem Sie style="background-color:" zum Element <body> hinzufügen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body style="background-color:#1c87c9;">
<h1>Eine Überschrift</h1>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>3. Erstellen eines Gradient-Hintergrunds
Die Gradientenhintergründe ermöglichen es Ihnen, fließende Übergänge zwischen zwei oder mehr spezifizierten Farben zu erstellen.
Es gibt zwei Arten von Gradientenhintergründen: linear-gradient (geht nach unten/oben/links/rechts/diagonal) und radial-gradient (definiert durch ihr Zentrum).
In den Hintergründen linear-gradient können Sie einen Startpunkt für die Farben festlegen. Wenn Sie einen Startpunkt nicht erwähnen, wird er voreingestellt automatisch auf "von oben nach unten" gesetzt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#grad {
height: 500px;
background-color: blue; /* Für Browser, die keine Farbverläufe unterstützen */
background-image: linear-gradient(to right, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Hintergrund des linearen Gradienten von rechts nach links</h1>
<div id="grad"></div>
</body>
</html>Das vorliegende Beispiel zeigt einen linearen Gradienten, der von links beginnt. Es beginnt bei Blau und geht über zu Grün. Ändern Sie es nach Ihren Wünschen.
In den Hintergründen radial gradient wird der Startpunkt durch sein Zentrum definiert.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#grad {
height: 500px;
background-color: grey; /* Für Browser, die keine Farbverläufe unterstützen */
background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Hintergrund Radial Gradient</h1>
<div id="grad"></div>
</body>
</html>4. Einen sich ändernden Hintergrund erstellen
Sie können einen Hintergrund erstellen, der seine Farben in der genannten Zeit ändert. Fügen Sie dazu die Eigenschaft animation zum Element <body> hinzu. Verwenden Sie die Regel @keyframes, um die Hintergrundfarben festzulegen, durch die sie fließen werden, sowie die Dauer, wie lange jede Farbe auf der Seite erscheinen wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
-webkit-animation: colorchange 20s infinite;
animation: colorchange 20s infinite;
}
@-webkit-keyframes colorchange {
0% {background: #8ebf42;}
25% {background: #e6ebef;}
50% {background: #1c87c9;}
75% {background: #095484;}
100% {background: #d0e2bc;}
}
@keyframes colorchange {
0% {background: #8ebf42;}
25% {background: #e6ebef;}
50% {background: #1c87c9;}
75% {background: #095484;}
100% {background: #d0e2bc;}
}
</style>
</head>
<body>
<h1>Zu ändernder Hintergrund </h1>
</body>
</html>Die Prozentsätze sind die Animationslänge, die unter "colorchange" (z.B. 20s) angegeben sind.