Einer der wichtigsten Aspekte beim Erstellen eines einzigartigen Designs für eine Website ist die Verwendung von CSS-Stilen und -Effekten. Und eine der wichtigsten und effektivsten Möglichkeiten, einer Website Charakter und Stimmung zu verleihen, ist die Verwendung von background css.
Background css ist eine Eigenschaft, mit der Sie ein Hintergrundbild, eine Farbe oder andere Stile für verschiedene Elemente einer Webseite festlegen können. Es ist ein leistungsfähiges Werkzeug, das hilft, Ihre Website visuell attraktiver und professioneller zu machen.
Um background css für ein Element einer Webseite festzulegen, müssen Sie die entsprechende CSS-Syntax verwenden. Um beispielsweise ein Hintergrundbild festzulegen, können Sie die Eigenschaft "background-image" verwenden und den Bildpfad mit einer absoluten oder relativen URL angeben.
Beim Festlegen von background CSS geht es jedoch nicht nur darum, ein Bild oder eine Hintergrundfarbe auszuwählen. Sie können auch verschiedene Eigenschaften wie Bildwiederholung, Hintergrundpositionierung, Transparenz und mehr anpassen. Mit einer Kombination verschiedener background CSS-Eigenschaften können Sie ein einzigartiges und schönes Hintergrundbild für Ihre Website erstellen.
Die Grundlagen von background in CSS
Verwenden Sie die Eigenschaft, um ein Hintergrundbild festzulegen background-image. Der Pfad zum Bild wird im Eigenschaftswert angegeben. Zum Beispiel:
Sie können die Hintergrundfarbe auch über die Eigenschaft festlegen background-color. Zum Beispiel:
Die Eigenschaften background-image und background-color können zusammen verwendet werden, um komplexere Hintergründe zu erstellen. Sie können auch mehrere Bilder als Ebenen festlegen, indem Sie die Eigenschaft verwenden background.
Verwenden Sie die Eigenschaft, um die Position des Hintergrundbilds zu steuern background-position. Sie können die Position in Pixel oder Prozent angeben. Zum Beispiel:
background-position: 50% 50%;
Verwenden Sie die Eigenschaft, um das Hintergrundbild horizontal, vertikal oder in beide Richtungen zu wiederholen background-repeat. Die Eigenschaftswerte können repeat, repeat-x, repeat-y oder no-repeat sein. Zum Beispiel:
Eigenschaft background-size legt die Größe des Hintergrundbilds fest. Sie können eine feste Größe in Pixeln oder Prozentsätzen festlegen und Cover- oder Contain-Werte verwenden, um das Bild automatisch an die Größe des Elements anzupassen. Zum Beispiel:
Verwenden der Eigenschaft background-attachment Sie können festlegen, ob das Hintergrundbild beim Scrollen zusammen mit dem Inhalt des Elements gescrollt wird oder an seinem Platz verbleibt. Zum Beispiel:
background in CSS bietet viele Möglichkeiten, um schöne und originelle Hintergründe auf Webseiten zu erstellen. Die praktische Anwendung dieser Eigenschaften ermöglicht es Ihnen, die Website für Benutzer attraktiver und interessanter zu machen.
Hintergrundfarbe mit der Eigenschaft background-color
Mit der background-color-Eigenschaft können Sie die Hintergrundfarbe für ein Webseiten-Element festlegen. Es kann sowohl im Wortformat als auch im Hexadezimalcode-Format angegeben werden.
Um die Hintergrundfarbe mit einem Wort festzulegen, müssen Sie den englischen Farbnamen verwenden, z. B.:
- background-color: red; - rote Farbe;
- background-color: blue; - blaue Farbe;
- background-color: green; - grüne Farbe;
Sie können auch Farben verwenden, die als RGB-Codes dargestellt werden, z. B.:
- background-color: #ff0000; - Farbe rot;
- background-color: #0000ff; - blaue Farbe;
- background-color: #00ff00; - grüne Farbe;
Neben der Verwendung von RGB-Wörtern und -Codes können Sie auch andere Formate verwenden, um die Hintergrundfarbe festzulegen, z. B.:
- HEX-Codes, zum Beispiel: background-color: #ff0000;
- RGB-Werte, zum Beispiel: background-color: rgb(255, 0, 0);
- RGBA-Werte, zum Beispiel: background-color: rgba(255, 0, 0, 0.5);
Mit der Eigenschaft background-color können Sie die Hintergrundfarbe eines Webseitenelements in verschiedenen Formaten festlegen, sodass Sie den gewünschten visuellen Effekt erzielen können.
Ein Bild als Hintergrund mit der Eigenschaft background-image
Mit der Eigenschaft background-image können Sie ein Bild als Hintergrund für ein Webseiten-Element festlegen. Dies ist eine großartige Möglichkeit, Ihren Inhalten zusätzliches visuelles Interesse zu verleihen und sie für Besucher attraktiver zu machen.
Um ein Bild als Hintergrund festzulegen, müssen Sie die korrekte Syntax für die background-image-Eigenschaft verwenden. Hier ist ein Beispiel:
- background-image: url(Bildpfad);
Anstelle von "Bildpfad" müssen Sie die Adresse oder den relativen Pfad des Bildes angeben, das Sie als Hintergrund verwenden möchten. Zum Beispiel:
- background-image: url(images/background.jpg);
Wenn sich das Bild nicht im selben Ordner wie die CSS-Datei befindet, stellen Sie sicher, dass Sie den Pfad des Bildes entsprechend seiner Position korrekt angegeben haben.
Sie können auch mehrere Bilder als Hintergrund angeben, indem Sie sie durch Kommas trennen. Der Browser versucht, die Bilder in der Reihenfolge herunterzuladen, in der sie aufgelistet sind:
- background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
Wenn das erste Bild nicht verfügbar ist, versucht der Browser, das zweite Bild hochzuladen und so weiter.
Mit der Eigenschaft background-image können Sie eine Vielzahl von Hintergrundeffekten mit verschiedenen Bildern erstellen. Es kann eine Textur, ein Muster, ein Foto oder ein anderes Bild sein, das zu Ihrem Design passt.
Wiederholen des Hintergrunds mit der background-repeat-Eigenschaft
Eigenschaft background-repeat legt fest, ob das Hintergrundbild entlang der X- und Y-Achse wiederholt werden soll. Wenn diese Eigenschaft nicht festgelegt ist, wird das Hintergrundbild standardmäßig sowohl horizontal als auch vertikal wiederholt.
Um das Verhalten eines Hintergrundbilds zu ändern, müssen Sie die folgenden Werte für die Eigenschaft verwenden background-repeat:
- repeat-x: das Hintergrundbild wird nur horizontal wiederholt;
- repeat-y: das Hintergrundbild wird nur vertikal wiederholt;
- no-repeat: Das Hintergrundbild wird weder horizontal noch vertikal wiederholt;
- repeat: Das Hintergrundbild wird sowohl horizontal als auch vertikal wiederholt.
Jeder dieser Werte kann für einzelne Hintergrundbilder mithilfe der Eigenschaft festgelegt werden background-repeat oder für alle Hintergrundbilder gleichzeitig mit einer verkürzten Eigenschaft background.
Es sollte auch berücksichtigt werden, dass, wenn Sie einen Wert festlegen no-repeat, dann wird das Hintergrundbild nur einmal angezeigt, zuerst in der oberen linken Ecke.
Verwenden der Eigenschaft background-repeat ermöglicht es Ihnen, vielfältige und kreative Hintergründe zu erstellen und das Verhalten einzelner Hintergrundbilder auf einer Webseite zu steuern.
Positionieren des Hintergrunds mit der Eigenschaft background-position
Eigenschaft background-position in CSS können Sie die Hintergrundposition für ein Element festlegen, das mit einer Eigenschaft festgelegt wurde background-image. Auf diese Weise können Sie die Position des Hintergrundbilds relativ zu einem bestimmten Punkt oder Bereich eines Elements steuern.
Bedeutung background-position kann mit einem oder zwei Werten angegeben werden. Wenn ein Wert festgelegt ist, bestimmt er die horizontale Position des Hintergrunds und die vertikale Position wird standardmäßig auf die Mitte gesetzt. Gültige Werte können in Pixeln, Prozentsätzen oder Stichwörtern angegeben werden, z. B. "left", "center", "right", "top", "bottom".
Wenn zwei Werte angegeben sind, gibt der erste Wert die horizontale und der zweite Wert die vertikale Position des Hintergrunds relativ zum Element an. Die Werte können auf dieselbe Weise wie ein einzelner Wert festgelegt werden.
Wenn Sie beispielsweise die Position des Hintergrunds links oben in einem Element festlegen möchten, können Sie den Wert left top verwenden. Und Sie können den Wert center verwenden, um die Position in der Mitte des Elements festzulegen.
Wenn Sie Prozentwerte als Werte verwenden, geben sie den Bruchteil der Breite oder Höhe eines Elements an, das das Hintergrundbild relativ zu seinen Rändern verschieben soll. Ein 50% -Wert von 25% bedeutet beispielsweise, dass der Hintergrund um 50% der horizontalen Breite des Elements und um 25% der vertikalen Höhe des Elements versetzt werden muss.
Verwenden der Eigenschaft background-position ermöglicht es Ihnen, den Hintergrund eines Elements genau zu positionieren und eine Vielzahl von Designeffekten zu erzeugen. Es wird häufig beim Erstellen von Webseiten verwendet und ermöglicht interessante Ergebnisse.
