Farbe und Hintergrund
Farbe und Hintergrund
Farbe und Hintergrund ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
Mit der Eigenschaft Color können wir die Farben des Textes ändern.
Wir können dieser Eigenschaft Werte im Format RGB, HEX, HSL, RGBA oder HSLA zuweisen.
Wir haben die Eigenschaft color bereits in vielen bisherigen Beispielen verwendet. Nun veranschaulichen wir ihre Verwendung mit verschiedenen Werttypen.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Hintergrund
Mit den Background-Eigenschaften können wir Stile für die Hintergründe von Elementen festlegen.
Sehen wir uns nun die unten aufgeführten Background-Eigenschaften an.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
Diese Eigenschaft wird verwendet, um die Hintergrundfarbe eines Elements zu ändern.
Sehen wir uns ein Beispiel an.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Deckkraft
Diese Eigenschaft wird verwendet, um die Deckkraft des Hintergrunds eines Elements zu ändern.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Deckkraft – 2
Die Änderung der CSS-Deckkraft ist im obigen Bild dargestellt.
Hintergrundbild
Die Eigenschaft background-image wird verwendet, um dem Hintergrund eines Elements Bilder hinzuzufügen.
Das Bild befindet sich unter https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Definieren wir nun ein div-Element und fügen seinem Hintergrund ein Bild hinzu.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Wenn Sie in unserem obigen Beispiel darauf geachtet haben, konnten wir das Bild nicht richtig platzieren, weil seine Standardgröße größer ist als der Bereich, in den wir es einfügen werden.
Um dieses Problem zu lösen, verwenden wir die Eigenschaft background-size.
Die Eigenschaft background-size kann Werte wie cover, contain und auto annehmen. Außerdem können wir ihr einen bestimmten Wert für die Breite und Höhe zuweisen.
Aktualisieren wir unser Beispiel erneut.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Setzen wir den Wert der Eigenschaft background-position nun als Prozentwert.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
Hier gibt es jedoch ein Problem. Da die Bildgröße kleiner als die Hintergrundgröße des Elements war, wurde das Bild mehrmals verwendet, um den Bereich auszufüllen.
Um dies zu verhindern, verwenden Sie die Eigenschaft background-repeat (mit den Werten repeat, repeat-x, repeat-y, initial, inherit oder no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
Eine weitere Hintergrund-Eigenschaft ist background-attachment. Mit dieser Eigenschaft können Sie festlegen, ob das Hintergrundbild beim Scrollen der Seite mitscrollt.
Für diese Eigenschaft können Sie die Werte fixed oder scroll verwenden.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Kurzschreibweise für Hintergründe
Wenn Sie die in den obigen Beispielen behandelten Hintergrund-Eigenschaften anwenden möchten, müssen Sie möglicherweise 4–5 Zeilen mit Deklarationen schreiben.
Mit der Kurzschreibweise background können Sie alle Angaben in einer einzigen Zeile festlegen.
Sehen wir uns ein Beispiel an.
In der Eigenschaft background werden no-repeat, die Größe, die Position auf der Seite und die URL des Quellbildes festgelegt.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
In diesem Abschnitt haben wir Farben und Hintergründe kennengelernt.
Im nächsten Abschnitt lernen wir die Konzepte Box, Block und Inline kennen.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 16
- Lektionen
- 35
Häufig gestellte Fragen
Ist die Lektion „Farbe und Hintergrund“ kostenlos?
Ja — der vollständige Text von „Farbe und Hintergrund“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Farbe und Hintergrund“?
Farbe und Hintergrund Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Farbe und Hintergrund“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.