Detaillierte Erklärung der CSS-Hintergrund- und Rahmen-Tag-Beispiele

1. CSS-Hintergrund-Tag

1. Stellen Sie die Hintergrundfarbe ein

Die Eigenschaft „background-color“ gibt die Hintergrundfarbe eines Elements an.
Nachfolgend sehen Sie ein kleines Beispiel:

Die Ergebnisse sind wie folgt:

Sie können Selektoren verwenden, um unterschiedliche Farben für unterschiedliche Tags festzulegen. Hier haben die Tags h1, div und p unterschiedliche Hintergrundfarben:
Beispiele:

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

2. Legen Sie das Hintergrundbild fest

Die Eigenschaft „Hintergrundbild“ gibt ein Bild an, das als Hintergrund eines Elements verwendet werden soll. Standardmäßig wird das Bild wiederholt, um das gesamte Element abzudecken. Verwenden Sie die URL, um externe Bilder zu importieren.
Die spezifischen Beispiele sind wie folgt:

Die laufenden Ergebnisse sind wie folgt:

Hinweis: Achten Sie bei der Verwendung von Hintergrundbildern auf den Stil des Hintergrundbildes und vermeiden Sie Bilder, die den Text stören, um die Wirkung nicht zu beeinträchtigen.

Problem mit CSS-Hintergrundwiederholung. Standardmäßig wiederholt die Hintergrundwiederholungseigenschaft das Bild sowohl vertikal als auch horizontal. Manche Bilder sollten nur horizontal oder vertikal wiederholt werden. Wenn Sie nur horizontal wiederholen möchten, müssen Sie (background-repeat: repeat-x;) verwenden, dann sieht der Hintergrund besser aus. Wenn Sie das Bild nur vertikal wiederholen möchten, müssen Sie background-repeat: repeat-y festlegen.
Das Attribut kann auch angegeben werden, um das Hintergrundbild nur einmal anzuzeigen: Verwenden Sie das Tag „background-repeat: no-repeat“.

4. Geben Sie den Speicherort des Hintergrundbildes an

Um die Position des Hintergrundbilds anzugeben, müssen Sie das Tag background-position verwenden. Ein konkretes Beispiel finden Sie in der folgenden Abbildung:
Der folgende Code zeigt das Hintergrundbild in der oberen rechten Ecke:

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

5. Stellen Sie das Hintergrundbild so ein, dass es fixiert wird

Mit der Eigenschaft background-attachment wird das Hintergrundbild so eingestellt, dass es fixiert ist. Der Eigenschaftswert scroll bedeutet, dass das Bild mit den Seitenelementen scrollt (der Standardwert), und fixed bedeutet, dass das Bild auf dem Bildschirm fixiert ist und nicht mit den Seitenelementen scrollt.

6. Stellen Sie die Größe des Hintergrundbilds ein

Mit der Eigenschaft „Hintergrundgröße“ können Sie die Höhe und Breite des Hintergrundbildes festlegen. Der erste Wert legt die Breite und der zweite die Höhe fest. Wenn Sie einen Wert festlegen, wird der zweite Wert standardmäßig auf „Auto“ gesetzt. Das Format ist wie folgt:
Hintergrundgröße: Eigenschaft 1, Eigenschaft 2;
Nachfolgend sind einige Beispiele aufgeführt:

Die Ergebnisse sind wie folgt:

7. Bildtransparenzeffekt einstellen

Mit dem Opazitätsattribut können Sie jedes Element transparent machen. Die Transparenz liegt zwischen 0 und 1. Das Format ist wie folgt:
Deckkraft: Deckkraftwert;

2. CSS-Rahmen-Tag

1. Rahmenfarbe festlegen

(1) Legen Sie den Rahmenstil fest (border-style)
Mit dem Rahmenstil wird der Stil des Rahmens definiert. Allgemeine Eigenschaftswerte sind wie folgt:
keine: Kein Rand, alle Randbreiten werden ignoriert (Standard).
durchgezogen: Der Rand ist eine einzelne durchgezogene Linie.
gestrichelt: Die Grenze ist eine gestrichelte Linie.
gepunktet: Der Rand ist gepunktet.
doppelt: Der Rand ist eine doppelte durchgezogene Linie.
Sie können den Stil einer einzelnen Seite der Box oder umfassend den Stil aller vier Seiten festlegen. Wenn Sie die Eigenschaft „border-style“ verwenden, um den Stil der vier Seiten umfassend festzulegen, müssen Sie die Reihenfolge im Uhrzeigersinn von oben, rechts, unten und links einhalten. Wenn Sie sie weglassen, wird das Prinzip der Werteverdoppelung verwendet, d. h. ein Wert entspricht vier Seiten; zwei Werte entsprechen oben, unten, links und rechts; drei Werte entsprechen oben, links, rechts und unten.
border-top-style: oberer Rahmenstil
border-right-style: rechter Rahmenstil.
borer-bottom-style: Stil der unteren Umrandung.
border-left-style: Stil der unteren Grenze.
Rahmenstil: oberer Rahmenstil, rechter Rahmenstil, unterer Rahmenstil, linker Rahmenstil
Rahmenstil: oberer Rahmenstil, linker Rahmenstil, unterer Rahmenstil.
Rahmenstil: oberer und unterer Rahmenstil, linker und rechter Rahmenstil.
Rahmenstil: Rahmenstile oben, unten, links und rechts.
(2) Rahmenbreite festlegen (border-width)
Mit der Eigenschaft border-width wird die Breite des Rahmens festgelegt. Ihr Format ist wie folgt
Rahmenbreite: oben [rechts unten links];
Im obigen Syntaxformat wird die Eigenschaft „Border-With“ normalerweise in Pixeln (px) ausgedrückt. Und außerdem können seine Attributwerte gemäß dem Prinzip der Wertereplikation auf 1 bis 4 eingestellt werden, d. h. ein Wert steht für die vier Seiten, zwei Werte stehen für oben/unten/links/rechts, drei Werte stehen für oben/links/rechts/unten und vier Werte stehen für oben/rechts/unten/links. Die Einzelheiten lauten wie folgt:
border-top-width: Breite des oberen Rahmens
border-right-width: Breite des rechten Rahmens.
borer-bottom-width: Breite des unteren Rahmens.
border-left-width: Breite des unteren Rahmens.
Rahmenbreite: obere Rahmenbreite, rechte Rahmenbreite, untere Rahmenbreite, linke Rahmenbreite
Rahmenbreite: Breite des oberen Rahmens, Breite des linken Rahmens und Breite des unteren Rahmens.
Rahmenbreite: obere und untere Rahmenbreite, linke und rechte Rahmenbreite.
Rahmenbreite: Die Breite der oberen, unteren, linken und rechten Ränder.
(3) Rahmenfarbe festlegen (border-color)
Mit der Eigenschaft border-color wird die Rahmenfarbe festgelegt. Ihr Format ist wie folgt:
Rahmenfarbe: oben [rechts unten links];
Beim Festlegen des Rahmenstils müssen Sie den Rahmenstil festlegen. Wenn der Stil nicht festgelegt ist oder auf „Keine“ gesetzt ist, sind andere Rahmeneigenschaften ungültig. Die einseitigen und umfassenden Einstellungen der Rahmenfarbe erfolgen im Uhrzeigersinn und folgen denselben Regeln wie die oben aufgeführten Breiten- und Stilattribute. Sie werden daher hier nicht einzeln beschrieben.
(4) Umfassende Randeinstellungen
border-top: Breite, Stil und Farbe des oberen Rahmens.
border-right: Breite des rechten Rahmens, Stil, Farbe
border-bottom: Breite, Stil und Farbe des unteren Rahmens
border-left: Breite, Stil und Farbe des linken Rahmens
Rahmen: Breite, Stil, Farbe aller vier Seiten (5) abgerundeter Rahmen
Mit der Eigenschaft border-radius können Sie einem Element abgerundete Ränder hinzufügen:
Das Syntaxformat ist unten dargestellt:
Rahmenradius: Parameter 1/Parameter 2
„Parameter 1“ stellt den horizontalen Radius der Rundung dar, und „Parameter 2“ stellt den vertikalen Radius der Rundung dar. Die beiden Parameter sind durch „/“ getrennt. Es ist zu beachten, dass bei Verwendung der Border-Raidius-Eigenschaft standardmäßig der erste Parameter verwendet wird, wenn der zweite Parameter weggelassen wird. Stellen Sie den Rahmenradius über den Rahmenradius ein.

Dies ist das Ende dieses Artikels, der CSS-Hintergrund- und Rahmen-Tags zusammenfasst. Weitere relevante CSS-Hintergrund- und Rahmeninhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!