CSS ist eine Abkürzung für Cascading Style Sheets. Es ist eine einfache, aber leistungsstarke Designsprache, die Webseiten transformieren kann. In einfachen Worten, es rationalisiert den Prozess, Webseiten mit Hilfe von präsentierbar und für die Benutzer ansprechend zu machen . In diesem Artikel erfahren Sie, wie Sie verschiedene Hintergrundbilder in CSS in der folgenden Reihenfolge implementieren:
- Hintergrundbild in den CSS-Eigenschaften
- Hintergrundbild in CSS
- Hintergrund Wiederholung
- Hintergrundanhang
- Hintergrundposition
- Hintergrundbild in CSS-Größe
- Hintergrundfarbe
Hintergrundbild in den CSS-Eigenschaften
Es gibt viele Eigenschaften, mit denen das Verhalten und die Positionierung des Bildes gesteuert werden. Diese Eigenschaften sind:
- Hintergrundbild
- Hintergrund Wiederholung
- Hintergrund-Anhang
- Hintergrundposition
- Hintergrundgröße
- Hintergrundfarbe
Wir werden uns mit jeder dieser Eigenschaften vertraut machen und anhand einer interessanten Demonstration sehen, wann und wie sie verwendet werden.
Arten der Transformation in der Informatik
Hintergrundbild in CSS
Das Hintergrundbild Eigenschaft, wie der Name schon sagt, wird einfach verwendet, um das Hintergrundbild durch ein Element auf einer Webseite anzuzeigen und festzulegen. Standardmäßig wird ein Hintergrundbild in der oberen linken Ecke eines Elements platziert.
Syntax: Hintergrundbild: URL | keine | linearer Gradient | radialer Gradient
body {Hintergrundbild: URL ('apple.jpg')}Hintergrund mit URL
Lassen Sie uns die Parameter verstehen:
- URL: Durch die Eingabe dieses Parameters können wir entweder einen Dateipfad zu einem beliebigen Bild oder die URL zu dem Bild angeben, das als Hintergrund festgelegt werden muss. Um mehr als ein Bild zu deklarieren, werden die URLs durch ein Komma getrennt.
body {Hintergrundbild: URL ('apple.jpg')} 
- keiner: Dies ist der Standardwert der Eigenschaft, und wenn der Wert angegeben wird, wird kein Hintergrundbild gerendert.
Körper {Hintergrund: keine}- linearer Gradient (): Das Hintergrundbild wird auf einen linearen Farbverlauf eingestellt. Für diese Eigenschaft müssen mindestens zwei Farben angegeben werden, d. H. Von oben nach unten.
Körper {Hintergrundfarbe: # 001 Hintergrundbild: linearer Farbverlauf (weiß 15%, transparent 16%), linearer Farbverlauf (weiß 15%, transparent 16%) Hintergrundgröße: 60px 60px Hintergrundposition: 0 0, 30px 30px}- Radialgradient (): Das Hintergrundbild wird auf einen radialen Gradienten eingestellt. Für diese Eigenschaft müssen mindestens zwei Farben angegeben werden, d. H. Für die Mitte bis zu den Kanten.
Körper {Hintergrundfarbe: # 001 Hintergrundbild: Radialgradient (weiß 15%, transparent 16%), Radialgradient (weiß 15%, transparent 16%) Hintergrundgröße: 60px 60px Hintergrundposition: 0 0, 30px 30px}- Repeating-Linear-Gradient (): Es wiederholt einen linearen Gradienten. Verwenden wir das gleiche Beispiel, das wir oben im linearen Gradienten für die Wiederholung des linearen Gradienten gesehen haben, und sehen wir den Unterschied.
Körper {Hintergrundfarbe: # 001 Hintergrundbild: Wiederholter linearer Farbverlauf (weiß 15%, transparent 16%), wiederholter linearer Farbverlauf (weiß 15%, transparent 16%) Hintergrundgröße: 60px 60px Hintergrundposition : 0 0, 30px 30px}- sich wiederholender radialer Gradient (): Es wiederholt einen radialen Gradienten. Lassen Sie uns das gleiche Beispiel untersuchen, das wir oben in einem radialen Gradienten verwendet haben.
body {Hintergrundfarbe: # 001 Hintergrundbild: sich wiederholender radialer Farbverlauf (weiß 15%, transparent 16%), sich wiederholender radialer Farbverlauf (weiß 15%, transparent 16%) Hintergrundgröße: 60px 60px Hintergrundposition : 0 0, 30px 30px}Fallback-Hintergrund
Als professioneller Tipp ist es immer ratsam, eine Hintergrundfarbe als Fallback-Option hinzuzufügen. Dies ist besonders dann hilfreich, wenn entweder die Hintergrundbilder nicht geladen werden oder der während der Entwicklung festgelegte Verlaufshintergrund von einigen der alten Browser, in denen er angezeigt wird, nicht unterstützt wird.
Dies beeinträchtigt nicht die Benutzererfahrung und kann wie folgt deklariert werden:
body {Hintergrund: URL (apple_lost.jpg) pink}Mehrfacher Hintergrund
Wir haben auch die Möglichkeit, mehrere Hintergrundbilder festzulegen, und dies ist in den meisten Fällen erforderlich, z. B. als Vordergrund- und Hintergrundbild. Die Reihenfolge des Bildes ist hier wichtig, das Bild, das vorne sein sollte, wird zuerst deklariert, und das Bild, das zuletzt hinten sein sollte, wird als nächstes deklariert.
Unten sehen Sie das Beispiel für mehrere Hintergrundbilder:
body {Hintergrundbild: URL ('small-heart.jpg'), URL ('background.jpg')}Hintergrund Wiederholung
Die Eigenschaft 'Hintergrundwiederholung' wird zusammen mit dem Hintergrundbild verwendet, um das Wiederholungsverhalten eines Bildes zu definieren. Es gibt an, ob und wie ein Hintergrundbild wiederholt wird. Das Hintergrundbild wird standardmäßig sowohl vertikal als auch horizontal wiederholt.
Die möglichen Werte sind:
- Wiederholen - Das Bild wird sowohl horizontal als auch vertikal wiederholt
- no-repeat - Das Bild wird nicht wiederholt
- repeat-x - Das Bild wird horizontal wiederholt
- repeat-y - Das Bild wird vertikal wiederholt
- Leerzeichen - Das Bild wird mit gleichmäßigen Leerzeichen oder Lücken dazwischen wiederholt.
- rund - Das Bild wird wiederholt, um den Bereich ohne Lücken zwischen ihnen zu füllen.
Die CSS-Syntax für die Eigenschaft 'Hintergrundwiederholung' lautet:
Hintergrund Wiederholung: Wiederholung | Wiederholung-x | Wiederholung-y | keine Wiederholung | Leerzeichen | Runde
body {Hintergrundbild: URL ('heart.png'), URL ('background.png') Hintergrundwiederholung: Wiederholung-y, Wiederholung-x Hintergrundfarbe: #ffffff}Hintergrundanhang
Das Hintergrund-Anhang Die Eigenschaft wird zusammen mit dem Hintergrundbild verwendet, um anzugeben, ob das Bild beim Scrollen des Inhalts gescrollt werden soll oder nicht. Dies bedeutet, dass das Hintergrundbild fixiert sein sollte oder zusammen mit dem Dokument relativ zur Browserfensteransicht gescrollt werden sollte. Der Standardwert ist das Scrollen.
Die möglichen Werte sind:
- scroll - Das Bild scrollt zusammen mit der Seite.
- behoben - Das Bild wird nicht zusammen mit der Seite gescrollt
Die CSS-Syntax für den Hintergrundanhang lautet:
Hintergrund-Anhang: scrollen | behoben
body {Hintergrundbild: URL ('heart.png'), URL ('background.png') Hintergrundwiederholung: Leerzeichen, rund}Hintergrundposition
Das Hintergrundposition Eigenschaft wird verwendet, um die Position oder Position eines Hintergrundbildes zu bezeichnen. Die möglichen Werte sind:
- oben
- Recht
- Unterseite
- links
- Center
- Kombination dieser Werte (z. B. links oben)
Die CSS-Syntax für die Hintergrundposition lautet:
Hintergrundposition: oben | rechts | links | unten | Mitte
body {Hintergrundbild: URL ('heart.png') Hintergrundwiederholung: keine Wiederholung Hintergrundanhang: Bildlauf}Hintergrundbild in CSS-Größe
Diese Eigenschaft ist eine der nützlichsten, da wir damit die Größe des Hintergrundbilds steuern können. Es gibt verschiedene Kombinationen, die wir mit dieser Eigenschaft verwenden können, um entsprechende Ergebnisse zu erzielen. Der Standardwert ist auto.
Die folgenden Werte können mit Hintergrundgröße verwendet werden:
- Auto
- eine Länge, Höhe und Breite des Bildes, z.B. 20px 40px.
- eine prozentuale Höhe und Breite des Bildes als Prozentsatz des übergeordneten Elements, z. 50% 50%.
- Mitte - Richten Sie das Bild auf die Mitte aus
- Abdeckung, skaliert das Bild so, dass es vollständig vom Hintergrundbereich abgedeckt wird.
- enthalten, skalieren Sie das Bild so, dass es bis zu seiner tatsächlichen Höhe und Breite passt.
Die CSS-Syntax für die Hintergrundposition lautet:
Hintergrundgröße: Wert
body {Hintergrundbild: URL ('heart.png'), URL ('background.png') Hintergrundwiederholung: keine Wiederholung, Wiederholung Hintergrundgröße: 400px 150px, Cover}body {Hintergrundbild: URL ('heart.png'), URL ('background.png') Hintergrundwiederholung: keine Wiederholung, Wiederholung Hintergrundgröße: enthalten, 400px 150px}Hintergrundfarbe
Dies gilt für die einfachste aller Eigenschaften in CSS. Es werden Volltonfarben auf den Hintergrund der Seite angewendet. Der Wert für diese Eigenschaft kann in Farben (z. B. Rot, Blau usw.), Hex-Wert und RGB-Wert angegeben werden.
Die CSS-Syntax für die Hintergrundfarbe lautet:
Hintergrundfarbe: Wert
Körper {Hintergrundbild: URL (small-heart.jpg) Hintergrundfarbe: # 22a8e3}Damit sind alle Eigenschaften abgeschlossen, die wir mit dem Hintergrund verwenden können. Wir können immer verschiedene Kombinationen der Eigenschaften ausprobieren, wie wir in unserer Demonstration gesehen haben.
CSS ist unerlässlich und muss Fähigkeiten für jeden Front-End-Webentwickler erwerben. Es hilft beim Entwerfen und Gestalten des Hintergrunds und beim Erstellen beeindruckender Websites und beim Bereichern der Benutzererfahrung. Das Beste ist, weiter zu experimentieren und diese spezielle Front-End-Technologie voll auszunutzen, da sie Wunder wirken und die Seite dynamisch transformieren kann.
Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „Hintergrundbild in CSS“ und wir werden uns bei Ihnen melden.