1.1 Eigenschaft background-color
Die Eigenschaft background-color legt die Hintergrundfarbe für ein Element fest. Sie ermöglicht es, eine Hintergrundfarbe festzulegen,
die eine visuelle Trennung des Inhalts bietet und das Verständnis des Textes und anderer Elemente verbessert.
Werte:
- Farbnamen: Du kannst vordefinierte Farbnamen wie
red,blue,greenverwenden - Hexadezimale Werte: zum Beispiel,
#ff0000,#00ff00,#0000ff - RGB: zum Beispiel,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: zum Beispiel,
rgba(255, 0, 0, 0.5)(halbtransparenter Rot) - HSL: zum Beispiel,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: beispielsweise,
hsla(0, 100%, 50%, 0.5)(halbtransparenter Rot).
Beispiel für die Verwendung:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Dieses Element hat einen roten Hintergrund.</div>
<div class="color-hex">Dieses Element hat einen Hintergrund in hexadezimalem Farbformat.</div>
<div class="color-rgba">Dieses Element hat einen halbtransparenten grünen Hintergrund.</div>
</body>
Erklärung des Codes:
background-color: red;: legt einen roten Hintergrund für das Element festbackground-color: #3498db;: legt die Hintergrundfarbe mit einem hexadezimalen Wert festbackground-color: rgba(46, 204, 113, 0.7);: legt einen halbtransparenten grünen Hintergrund unter Verwendung von RGBA fest
1.2 Eigenschaft background-image
Die Eigenschaft background-image legt ein Hintergrundbild für ein Element fest. Sie ermöglicht es, Bilder zu verwenden, um
visuell ansprechende Hintergründe zu erstellen und so das Design und die Wahrnehmung der Webseite zu verbessern.
Als Wert musst du eine Bild-URL angeben — den Pfad zu dem Bild, das als Hintergrund verwendet wird, angeben. Zum Beispiel, url('image.jpg').
Beispiel für die Verwendung:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Dieses Element hat ein Hintergrundbild.</div>
</body>
Erklärung des Codes:
background-image: url('https://via.placeholder.com/150');: legt ein Bild als Hintergrund für das Element fest. In diesem Fall wird eine Bild-URL verwendet
Vorteile der Verwendung von background-image:
- Visuelle Attraktivität: die Verwendung von Hintergrundbildern ermöglicht es, visuell ansprechendere und interessantere Webseiten zu erstellen.
- Kontext: Hintergrundbilder können zusätzlichen Kontext oder Informationen bieten und das visuelle Verständnis des Seiteninhalts verstärken.
- Branding: Hintergrundbilder können Teil des Brandings sein und helfen, einen einheitlichen Stil und die Wiedererkennbarkeit der Website zu pflegen.
Tipps zur Verwendung von Hintergrundbildern:
- Bildoptimierung: zur Verbesserung der Seitenleistung ist es wichtig, Bilder zu optimieren, indem man ihre Größe ohne wesentlichen Qualitätsverlust reduziert
- Cross-Browser-Kompatibilität: stelle sicher, dass die verwendeten Bilder in allen Zielbrowsern korrekt angezeigt werden
- Alternativtext: für Bilder, die von Bedeutung sind, sollten alternative Kommunikationswege vorgesehen werden, wie textliche Beschreibungen, für Benutzer mit Einschränkungen
1.3 Gemeinsame Nutzung von background-color und background-image
Die Eigenschaften background-color und background-image können zusammen verwendet werden, um komplexe und ansprechende Hintergründe zu erstellen.
Zum Beispiel kannst du eine Hintergrundfarbe festlegen, die sichtbar wird, wenn das Hintergrundbild nicht geladen wird, oder
eine farbige Hintergrund in Kombination mit einem halbtransparenten Bild verwenden.
Beispiel für die Verwendung:
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Dieses Element hat einen kombinierten Hintergrund mit Bild und farbigem Hintergrund.
</div>
</body>
Erklärung des Codes:
background-color: #3498db;: legt die Hintergrundfarbe festbackground-image: url('https://via.placeholder.com/150');: legt das Hintergrundbild festwidth: 300px;height: 300px;: legt die Maße des Elements festcolor: white;: legt die Textfarbe für bessere Lesbarkeit auf dem Hintergrund festdisplay: flex;align-items: center;justify-content: center;text-align: center;: zentriert den Text innerhalb des Elementsborder: 1px solid #000;: fügt einen Rahmen um das Element hinzu, um es visuell hervorzuheben
GO TO FULL VERSION