Share
Wir haben ein umfassendes Handbuch erstellt, mit dessen Hilfe Sie CSS erlernen können, egal ob Sie gerade erst mit den Grundlagen beginnen oder etwas weiter fortgeschrittenes CSS erkunden möchten.
In diesem Tutorial werden wir uns mit einer der älteren, bekannteren CSS-Eigenschaften befassen: Hintergrund. Hintergrund ist eine von mehreren CSS-Eigenschaften, deren Funktionen oft übersehen werden. Tatsächlich wurde ein Upgrade mit CSS3 vorgenommen, das neue Funktionen erhielt, die über das Hinzufügen eines Hintergrundbildes oder einer Farbe hinausgingen. Schauen wir uns einige davon an!
Das Positionieren einer Hintergrundgrafik ist unkompliziert und mit dem Sie wahrscheinlich bereits vertraut sind. Wenn wir den Hintergrund rechts unterhalb des Elements positionieren möchten, wenden wir uns an unten rechts zu Hintergrundposition. Zum Beispiel:
#arbeitsbereich width: 100%; Max-Breite: 668px; Höhe: 400px; Hintergrundfarbe: # 525d62; Hintergrundbild: URL (images / macbook.png); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: rechts unten;
Oder mit der Abkürzung, Hintergrund, nach der URL-Definition:
#arbeitsbereich width: 100%; Max-Breite: 668px; Höhe: 400px; Hintergrund: # 525d62 URL (images / macbook.png) no-repeat rechts unten;
Seit der Einführung von CSS3 konnten wir die Position angeben Versatz; die genauen Abstände zu den eingestellten Positionen. Nehmen wir unser Beispiel von unten rechts, wir beinhalten unten 20px rechts 30px unseren Hintergrund bei positionieren 20px von unten und 30px von links.
#arbeitsbereich width: 100%; Max-Breite: 668px; Höhe: 400px; Hintergrundfarbe: # 525d62; Hintergrundbild: URL (images / macbook.png); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: rechts 30px unten 20px;
Die Positionen (Unterseite, oben, Recht, links) kann in beliebiger Reihenfolge definiert werden, aber die Offsetlänge muss definiert werden nach dem jede Hintergrundposition.
Dank geht an Metin Kazan für die Illustrationen.
Das Hintergrund Diese Eigenschaft ermöglicht es uns auch, mehrere Hintergrundbilder hinzuzufügen. Lassen Sie uns daher unser voriges Beispiel um weitere Dinge und Gadgets erweitern.
Wir fügen diese Bilder zu einem Bild hinzu Hintergrund oder Hintergrundbild Deklaration durch Trennen jedes durch Kommas. Wir nehmen das Hintergrundposition Eigenschaft, die auch mehrere Werte akzeptiert, um jedes dieser Hintergrundbilder zu steuern.
#arbeitsbereich height: 400px; Hintergrundfarbe: # 525d62; Hintergrundbild: URL (images / macbook.png), URL (images / mouse.png), URL (images / hdd.png), URL (images / phone.png), URL (images / ipad.png), URL (images / coffee.png), url (images / camera.png); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * coffee.png * / 7% 280px; / * camera.png * /
Wir können feste Einheiten (z. B. Pixel), flexible Einheiten (z. B. Prozentsätze) oder eine Kombination aus beiden verwenden.
Jedes Wertepaar repräsentiert die Koordinaten von oben links des Containerelements auf die oben links des Bildes. Zum Beispiel ist die obere linke Ecke des Kamerabildes 280 Pixel von der Oberseite des Containers, dann 7% der verfügbar Breite quer von links.
Hinweis: Das verfügbar width ist die Gesamtbreite des Containerelements minus der Breite des Hintergrundbilds. Daher erscheint ein Hintergrundbild, das 50% entlang der x-Achse positioniert ist, genau zentriert!
Außerdem seit dem Hintergrundposition ist eine animierbare Eigenschaft, wir können einen lebendigeren, fesselnden Hintergrund schaffen:
#arbeitsbereich width: 600px; Höhe: 400px; Hintergrundfarbe: # 525d62; Hintergrundwiederholung: keine Wiederholung; Hintergrundbild: URL (images / macbook.png), URL (images / mouse.png), URL (images / hdd.png), URL (images / phone.png), URL (images / ipad.png), URL (images / coffee.png), url (images / camera.png); Hintergrundposition: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; Animation: 3s Leichtigkeit 0s InView vorwärts; @keyframes inView 0% background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; Hintergrundposition x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% Hintergrundposition-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; Hintergrundposition x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% Hintergrundposition-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; Hintergrundposition x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% Hintergrundposition-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; Hintergrundposition x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% Hintergrundposition-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; Hintergrundposition x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% Hintergrundposition-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; Hintergrundposition x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% Hintergrundposition-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Hier haben wir eine Reihe von Keyframes entlang einer Timeline eingerichtet. Bei jedem Keyframe haben wir die Einstellung geändert Hintergrundposition x und Hintergrundposition-y von jedem Hintergrundbild. Die Animation ist zwar rudimentär, also bitte den CodePen gabelig machen und verbessern!
Hinweis: Klicken Wiederholung unten rechts vom Stift, um die Animation zu sehen
Die von uns verwendeten Hintergründe sind nacheinander geordnet. Die erste Liste wird oben im Stapel angezeigt, während die letzte Liste am unteren Rand des Hintergrundstapels angezeigt wird.
#arbeitsbereich width: 600px; Höhe: 400px; Hintergrundfarbe: # 525d62; Hintergrundbild: URL (images / macbook.png), URL (images / mouse.png), URL (images / hdd.png), URL (images / phone.png), URL (images / ipad.png), URL (images / coffee.png), url (images / camera.png); / * am unteren Rand gestapelt * / Hintergrundwiederholung: keine Wiederholung;
Alle Hintergrunduntereigenschaften (Hintergrund Wiederholung, Hintergrundgröße, Hintergrundposition etc.) kann mehrmals definiert werden, außer Hintergrundfarbe. Wenn wir mehrere Hintergründe mit der Abkürzung anwenden Hintergrund Definieren Sie die Hintergrundfarbe als neuesten Wert, der wirksam werden soll. Zum Beispiel:
#arbeitsbereich height: 400px; Hintergrund: URL (images / macbook.png) 50% 50% keine Wiederholung, URL (images / mouse.png) 430px 295px keine Wiederholung, URL (images / camera.png) 425px 230px keine Wiederholung # 525d62;
Alternativ können Sie ein separates hinzufügen Hintergrundfarbe, Nach der Short-Hand-Eigenschaft:
#arbeitsbereich width: 600px; Höhe: 400px; Hintergrund: URL (images / macbook.png) 50% 50% no-repeat, url (images / mouse.png) 430px 295px no-repeat, url (bilder / camera.png) 425px 230px no-repeat; Hintergrundfarbe: # 525d62;
Beide Codes machen das Gleiche, aber letzteres finde ich intuitiver und lesbarer.
Das Hintergrund-Mischmodus funktioniert genauso wie in Grafikanwendungen wie Photoshop oder Gimp; es mischt Hintergrundbilder miteinander sowie alles, was sich darunter befindet.
Das Hintergrund-Mischmodus übernimmt vertraute Werte wie Überlagerung und multiplizieren Unter einigen anderen, die Jonathan Cutrell in seinem Tutorial zu diesem Thema hervorragend erklärt. Ich empfehle Ihnen dringend, es durchzulesen, damit wir in einige praktische Beispiele einsteigen können.
Es gibt verschiedene Möglichkeiten, den CSS-Überblendungsmodus zu verwenden, um auffällige Designs zu erstellen, z. B. einen Verlauf mit einem Bild zu mischen, auf das Ian Yates in seiner Inspirationszusammenfassung hinweist:
Um diesen Effekt zu erzeugen, fügen wir ein Hintergrundbild und einen Farbverlauf hinzu und wenden das an Überlagerung Mischmodus.
Accentsconagua
#blend Hintergrundwiederholung: keine Wiederholung; Hintergrundbild: URL ('img / people-15.jpg'), linearer Gradient (135 Grad, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); Hintergrund-Mischmodus: Überlagerung; Die Überlagerung wirkt sich auf beide hier aufgeführten Hintergründe aus. Daher müssen Sie möglicherweise vorsichtig sein, wenn Sie nicht möchten, dass alles zusammengefügt wird. Wenn Sie nicht alles mit der Hintergrundfarbe mischen möchten, setzen Sie den zweiten Wert auf normal das gilt für unser zweites Hintergrundbild.
#blend Hintergrundwiederholung: keine Wiederholung; Hintergrundbild: URL ('… /img/people-15.jpg'), linearer Gradient (135 °, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); Hintergrundfarbe: gelb; Hintergrund-Mischmodus: Overlay, normal; Das Hintergrund-Clip property ist ein Dienstprogramm, das steuert, wie Hintergrundfarbe und Bildspanne innerhalb des CSS-Inhaltsrahmenmodells gesteuert werden. Ähnlich wie Box-Sizing Eigenschaft, die Hintergrund-Clip Die Eigenschaft nimmt drei gültige Werte an, und zwar:
Border-Box ist der Standardwert, der das Hintergrundbild oder die Farbe bis zum äußeren Rand des Elements umfasst.Polsterbox wird den Hintergrund bis zum äußeren Rand der Polsterung spannen, oder anders ausgedrückt; der innere Rand der Grenze.Inhaltsfeld behält den Hintergrund des Elementinhalts wie folgt bei:Ein praktisches Beispiel, wo ich gefunden habe Hintergrund-Clip Praktisch ist es, wenn ich eine Schaltfläche mit einem Symbol erstellen und dabei ein einzelnes Element verwenden muss. In der folgenden Demo erstreckt sich unser Bild vom linken zum rechten Rand des Elements, selbst wenn wir auf jeder Seite eine Auffüllung hinzufügen, da es immer noch gilt Border-Box.
Wenn wir das Symbol mit etwas Leerzeichen umgeben möchten, müssten wir es normalerweise mit einem anderen Element umschließen und das zusätzliche Element mit Padding versehen. Verwendung der Hintergrund-Clip Eigenschaft, wir können es elegant tun, indem wir es setzen Inhaltsfeld, und ersetzen Sie die Auffüllung durch Ränder der gleichen Farbe als Hintergrundfarbe.
Das Hintergrund Immobilien verwenden wir häufig in unseren Projekten. Ich hoffe, dieser Artikel hat Sie an seine vielfältigen Einsatzmöglichkeiten erinnert, und ich freue mich darauf, weitere Ideen in den Kommentaren zu hören.
Eine letzte Anmerkung: Browserunterstützung für diese Eigenschaften (mit Ausnahme von Hintergrund-Mischmodus) sind großartig. Laut CanIUse werden ab Internet Explorer 9 mehrere Hintergründe unterstützt, wobei nur ein paar triviale Probleme auftreten. Hintergrundbildoptionen, wie z Hintergrund-Clip Eigenschaft, ist fast so gut.
Blending-Modi funktionieren zum Zeitpunkt des Schreibens am besten in Chrome und Opera und sind aufgrund einiger Fehler in Safari teilweise anwendbar, scheinen aber mit Microsoft Edge leider keine Fortschritte zu machen.
