So fügen Sie dem CSS einen Hintergrund hinzu: Eine detaillierte Anleitung

Hintergrund hinzufügen - eine der einfachsten Möglichkeiten, Ihrer Website ein schönes und interessantes Aussehen zu verleihen. Mit CSS (Cascading Style Sheets) können Sie ganz einfach eine Vielzahl von Hintergründen hinzufügen, einschließlich Bildern, Farbverläufen und Farben. In diesem Leitfaden werden wir verschiedene Möglichkeiten zum Hinzufügen von Hintergrundelementen zu Ihrer Website untersuchen.

Verwenden von Bildern als Hintergrund

Eine der beliebtesten Methoden zum Hinzufügen eines Hintergrunds zu einer Website ist die Verwendung von Bildern. Dazu können Sie die Eigenschaft in CSS verwenden background-image. Sie können einen Bildpfad angeben oder eine URL verwenden, um ein Bild von einer anderen Quelle herunterzuladen. Zum Beispiel können Sie einer Webseite ein Hintergrundbild mit dem folgenden CSS-Code hinzufügen:

Verwenden von Farbverläufen als Hintergrund

Wenn Sie einen glatten Übergang zwischen zwei oder mehr Farben erstellen möchten, können Sie Farbverläufe als Hintergrund verwenden. CSS bietet mehrere Möglichkeiten, Farbverläufe zu erstellen. Sie können beispielsweise lineare Farbverläufe, radiale Farbverläufe oder sich wiederholende Farbverläufe verwenden. Verwenden der Eigenschaft background-image und Funktionen linear-gradient() sie können einen linearen Farbverlauf als Hintergrund hinzufügen, wie unten gezeigt:

Verwenden von Farbe als Hintergrund

Wenn Sie keine Bilder oder Farbverläufe verwenden müssen, können Sie einfach die Farbe als Hintergrund verwenden. Verwenden Sie dazu die Eigenschaft background-color. Sie können eine Farbe mit ihrem englischen Namen oder ihrem Code als RGB- oder HEX-Wert angeben. Um beispielsweise einer Webseite einen roten Hintergrund hinzuzufügen, schreiben Sie im CSS-Code Folgendes ein:

In diesem Tutorial haben wir verschiedene Möglichkeiten zum Hinzufügen eines Hintergrunds zu einer Website mithilfe von CSS untersucht. Sie können diejenige auswählen, die für Ihr Projekt am besten geeignet ist. Verwenden Sie Eigenschaften background-image, linear-gradient oder background-color um einen schönen und einzigartigen Hintergrund für Ihre Website zu erstellen.

Anwenden eines Hintergrunds mit background-color

Um den Hintergrund über anzuwenden background-color sie müssen die gewünschte Farbe entweder im Hexadezimalformat oder mit einem der vordefinierten Farbnamen angeben. Zum Beispiel:

body

In diesem Beispiel wird die Hintergrundfarbe für das Element im Hex-Codeformat #f0f0f0 angegeben, das eine hellgraue Farbe darstellt. Sie können auch vordefinierte Namen für eine Farbe verwenden, z. B.:

In diesem Beispiel haben alle Elemente auf einer Webseite einen gelben Hintergrund.

Verwenden der Eigenschaft background-color Sie können interessante und spektakuläre Farbkombinationen für den Hintergrund einer Webseite erstellen. Sie können beispielsweise eine transparente Farbe verwenden, indem Sie einen Eigenschaftswert auf einen Wert festlegen rgba:

In diesem Beispiel hat das Element einen roten Hintergrund mit einer halben Transparenz (0.5).

Verwenden Sie die Eigenschaft background-color um die Hintergrundfarbe auf einer Webseite festzulegen, um ein interessantes und stilvolles Design für Ihre Projekte zu erstellen.

Verwenden von Hintergrundbildern

Sie können die Eigenschaft background-image verwenden, um dem CSS ein Hintergrundbild hinzuzufügen. Der Wert dieser Eigenschaft kann eine Bild-URL sein. Zum Beispiel:

background-image: url("image.jpg");

Sie können andere Eigenschaften wie background-repeat , background-position und background-size zusammen mit background-image verwenden, um festzulegen, wie das Hintergrundbild auf der Seite angezeigt wird.

Mit der background-repeat-Eigenschaft können Sie steuern, wie ein Bild im Hintergrund wiederholt wird. Der Wert "no-repeat" stellt sicher, dass das Bild nur einmal ohne Wiederholungen angezeigt wird:

background-repeat: no-repeat;

Die Eigenschaft background-position bestimmt die Position des Bildes im Hintergrund. Sie können Werte wie top , center und bottom angeben, um die vertikale Position zu definieren, und left , center und right für die horizontale Position festlegen:

background-position: center;

Mit der Eigenschaft background-size können Sie die Größe des Bildes im Hintergrund festlegen. Es kann Werte wie auto , cover und contain annehmen. Der Cover-Wert dehnt das Bild so aus, dass es den Hintergrundbereich vollständig bedeckt, während contain das Bild im Hintergrundbereich platziert, wobei das Seitenverhältnis beibehalten wird:

background-size: cover;

Sie können auch mehrere Hintergrundbilder auf derselben Seite verwenden, indem Sie die Eigenschaft background-image verwenden und für jedes Bild Werte für die Eigenschaften background-repeat , background-position und background-size festlegen.

Die Verwendung von Hintergrundbildern in CSS hilft dabei, ein einzigartiges und einprägsames Design für eine Webseite zu schaffen, wodurch der visuelle Eindruck und die Attraktivität für Besucher verbessert werden.

Anpassen der Hintergrundgröße und -position

Wenn Sie einem Element mit CSS einen Hintergrund hinzufügen, können Sie dessen Größe und Position anpassen, um den gewünschten Effekt zu erzielen.

Eine wichtige Eigenschaft, die Sie zum Anpassen der Hintergrundgröße verwenden können, ist background-size. Mit dieser Eigenschaft können Sie die Größe des Hintergrundbilds in relativen oder absoluten Maßeinheiten angeben. Zum Beispiel können Sie Folgendes verwenden background-size: cover;, um ein Hintergrundbild zu erstellen, das den gesamten Bereich eines Elements ausfüllt oder background-size: contain;, um das Seitenverhältnis des Bildes beizubehalten und es vollständig an die Grenzen des Elements anzupassen.

Eine weitere wichtige Eigenschaft zum Anpassen der Hintergrundposition ist background-position. Mit dieser Eigenschaft können Sie die horizontale und vertikale Position des Bildes innerhalb des Elements angeben. Zum Beispiel können Sie Folgendes verwenden background-position: center center;, um das Hintergrundbild in der Mitte des Elements zu platzieren oder background-position: right bottom;, um es unten rechts zu platzieren.

Um diese Eigenschaften zu verwenden, können Sie sie der CSS-Regel für ein Element mit Hintergrund hinzufügen. Zum Beispiel:

Dies sind nur einige der möglichen Kombinationen, um die Größe und Position des Hintergrunds in CSS anzupassen. Experimentieren Sie mit verschiedenen Eigenschaftswerten, um den gewünschten Effekt auf Ihren Webseiten zu erzielen.

Hinzufügen von Transparenz zum Hintergrund

Hier ist ein Beispiel für die Verwendung der opacity-Eigenschaft :

Пример текста на прозрачном фоне.

.transparent-background

Im obigen Beispiel wird ein Block mit der Klasse transparent-background erstellt, der einen schwarzen Hintergrund mit einer Transparenz von 0.5 aufweist. Auf diese Weise wird das Element mit dem darin enthaltenen Text sichtbar, aber transparent sein.

Mit der Opacity-Eigenschaft können Sie verschiedene Effekte mit einem Hintergrund erzeugen, der je nach Designanforderungen durchscheinend oder vollständig transparent ist.

Der Wert der opacity-Eigenschaft wird auf den gesamten Inhalt des Elements angewendet, einschließlich Text und anderer untergeordneter Elemente. Wenn Sie Transparenz nur auf den Hintergrund anwenden möchten, können Sie den Alphakanalwert der Hintergrundfarbe mithilfe der rgba-Eigenschaft verwenden.

Hier ist ein Beispiel für die Verwendung der rgba-Eigenschaft für einen transparenten Hintergrund:

Пример текста на прозрачном фоне.

.transparent-background

Im obigen Beispiel wird ein Block mit der Klasse transparent-background erstellt, der einen schwarzen Hintergrund mit einer Transparenz von 0.5 aufweist, wobei der Alphakanalwert von 0.5 für die Hintergrundfarbe verwendet wird. Der Text innerhalb des Blocks wird auf einem transparenten Hintergrund mit der angegebenen Transparenz angezeigt.

Dies sind die zwei Hauptmethoden, um dem Hintergrund eines Elements mithilfe von CSS Transparenz hinzuzufügen. Die Wahl, welche zu verwenden ist, hängt von den Anforderungen des Projekts und dem beabsichtigten Designeffekt ab.