Background Images

In dieser Lektion lernen wir Hintergrundbilder kennen. Sie sind bereits mit der Eigenschaft Hintergrundfarbe vertraut und die Eigenschaft Hintergrundbild ist sehr ähnlich, außer dass eine Volltonfarbe verwendet wird. Es ermöglicht uns, eine Bilddatei zu importieren, die als Hintergrund verwendet werden soll. Im H TMLC-Abschnitt des Kurses haben wir nun das I MGM-Element kennengelernt, mit dem wir dem Inhalt der Seite ein Bild hinzufügen können. Wenn wir jedoch aus stilistischen Gründen Bilder zu unseren Seiten hinzufügen möchten, bei denen das Bild an sich nicht genau der Inhalt ist, können wir CSSA verwenden, um Hintergrundbilder auf verschiedene Elemente anzuwenden. Jetzt denke ich, dass dies mehr Sinn ergibt, sobald wir auf ein Beispiel springen. Also lasst uns anfangen. Hier ist eine Beispielseite. Und stellen wir uns vor, ich möchte ein Hintergrundbild hinzufügen, das sich oben in diesem insgesamt weißen Containerelement in dem Ordner befindet, in dem sich unsere Website-Datei befindet. Wir können sehen, dass ich einen Ordner mit dem Namen images habe und in diesem Ordner eine Datei mit dem Namen Farbkachel. Wenn ich die Datei vergrößere oder aufblase, kannst du sehen, dass es sich nur um ein grünes Quadrat und ein gelbes Quadrat handelt. Wenn wir nun dieses Bild als Hintergrund für diesen insgesamt weißen Container verwenden möchten, finde ich einfach die Containerelementregel in meinem Stylesheet. Hier ist es. Und ich werde ein neues Hintergrundbild für die Eigenschaft hinzufügen, Arel, und hier zeigen wir den Webbrowser auf die Bilddatei. Nun muss das Können, das wir schreiben, relativ sein. Aus der CSSA-Datei. So befindet sich beispielsweise die CSSA-Datei im CSSA-Ordner. Also müssen wir zuerst einen Punkt-Punkt-Schrägstrich des Ordners hochgehen, der dies außerhalb des CSSA-Ordners bringt. Dann wollen wir in den Bilderordner gehen. Also Bilder Schrägstrich. Und dann geben wir einfach den Namen der Datei ein. Also Farbkachel-Dokument PFG Und wenn wir speichern und aktualisieren, können wir sehen, dass das schrecklich aussieht. Hintergrundbilder werden jetzt standardmäßig sowohl horizontal als auch vertikal wiederholt oder gekachelt, um das gesamte Element auszufüllen, auf das Sie das Hintergrundbild angewendet haben. Wie gesagt, das sieht jetzt schrecklich aus. Lassen Sie uns also den Browser davon abhalten, das Bild zu wiederholen oder zu kacheln. Wir fügen eine neue Eigenschaft namens background repeat hinzu und stellen ihr einen Wert ohne Bindestrich zur Verfügung. Wiederholen. Viel besser. Ich wollte jedoch, dass das Bild horizontal kachelt oder wiederholt wird, nur nicht vertikal. Um dies zu erreichen, können Sie anstelle von keiner Wiederholung angeben. x wiederholen. Dadurch wird das Bild entlang der x-Achse oder horizontal perfekt gekachelt. Und wenn wir das Bild nur vertikal kacheln wollten, könnten wir eine Wiederholung y sehen. Das ist jedoch nicht das, was wir wollen. So würde ich das Bild nicht gestalten. Also wiederhole x. Dies ist also der visuelle Effekt, bei dem ich nach einem horizontalen Streifen aus abwechselnd grünen und gelben Blöcken suchte, und durch Nutzung der Repeat x-Eigenschaft konnte ich den Effekt mit einem sehr kleinen Bild erzeugen. Meine Website-Besucher können diese Grafikdatei sehr schnell herunterladen, und dann wird ihr Webbrowser die schwere Arbeit tun, sie zu wiederholen, um den verfügbaren Platz zu füllen. Als nächstes fügen wir dem Containerelement ein wenig Auffüllen oben hinzu, um dem Platz entgegenzuwirken, den dieses Hintergrundbild jetzt einnimmt, um die oberen 15 Pixel aufzufüllen. Kommen wir zurück, um mehr über die Eigenschaften von Hintergrundbildern zu erfahren. Stellen wir uns also vor, wir möchten ein neues Bild dieser Blume in den hetter Bereich unserer Website einfügen. Lassen Sie uns also zuerst die Kopfzeile hervorheben, damit wir auf derselben Seite sind und verstehen, in welchem Bereich ich über die Hintergrundfarbe Grau spreche. Ich beziehe mich also auf den Raum, der derzeit grau ist. Entfernen wir eigentlich die rechte Seitenpolsterung des gesamten Container-Element-Containers nach rechts drehend. Entfernen wir dies einfach, damit die linke Seite bündig an der rechten Kante anliegt. Stellen wir uns also vor, dass wir dieses Blumenbild als Hintergrund für diesen Graubereich hinzufügen möchten. Also werde ich diese Blumendatei sehr schnell in den Bilderordner verschieben. Und lass uns zu unserem CSS springen. Hier ist das Header-Element, dem wir einen Hintergrund hinzufügen möchten. Also habe ich die Eigenschaft Hintergrundfarbe entfernt, die nur veranschaulichen sollte, auf welchen Abschnitt der Seite sich bezog. So speichern wir Hintergrundbild Sie RL Klammern. Wir wollen einen Ordner nach oben gehen, so dass wir aus dem CSSA-Ordner heraus sind, dann wollen wir in den Bilderordner graben und der Dateiname ist bemehlt J Schwein Ich sehe mehrere Anpassungen, die wir vornehmen sollten. Die erste ist, dass ich möchte, dass das Hintergrundbild bündig mit der rechten Seite unseres Layouts abschließt. Dieser zusätzliche Leerraum sollte also nicht hier sein. Jetzt ist die Hintergrundbilddatei nur ungefähr so breit und standardmäßig versuchen Hintergrundbilder, sich mit der linken Seite des Elements auszurichten, auf das sie angewendet werden. Aber wir möchten, dass es sich an der rechten Seite der Kopfzeile ausrichtet. Jetzt gibt es eine CSSA-Eigenschaft namens background position, mit der wir ihre Position anpassen können. Diese Eigenschaft akzeptiert zwei Werte. Das erste Steuerelement ist die horizontale Position und der zweite Wert steuert die vertikale Position, sodass das Bild horizontal nach rechts ausgerichtet werden soll. Jetzt ist vertikal etwas schwieriger. Hier also das Foto oder die Bilddatei. Ich bin daran interessiert, den vertikalen Mittelteil des Bildes anzuzeigen. Wenn wir uns also unser Layout ansehen, können wir feststellen, dass der Header nicht sehr groß ist, sodass wir nur einen Teil des Bildes einpassen können. Jetzt mache ich mir keine Sorgen um die Oberseite und ich mache mir keine Sorgen um die Unterseite. Für die vertikale Eigenschaft füge ich also das Schlüsselwort center hinzu. Wenn ich also speichere und aktualisiere, können wir sehen, dass das Hintergrundbild rechts und vertikal ausgerichtet ist. Wir sehen den Sweet Spot in der vertikalen Bildmitte. Die nächste Anpassung, die ich vornehmen werde, besteht darin, den Hintergrund nicht zu wiederholen oder zu kacheln, damit wir dies auf der linken Seite beheben können. Hintergrundwiederholung keine Wiederholung. Exzellent. Der Grund, warum ich ein Bild gewählt habe, das viel größer ist als der Raum, auf den es angewendet wird, ist, dass wir nie wissen, wie groß der Kopf wird. Was wäre beispielsweise, wenn wir die Navigationslinks so anpassen würden, dass sie mehr Platz beanspruchen. Was wäre zum Beispiel, wenn sie statt 10 Pixel vertikaler Auffüllung 25 Pixel vertikale Auffüllung hätten, damit wir sehen können, dass jetzt mehr von unserem Blumenhintergrundbild durchscheinen und sichtbar sein kann. Der entscheidende Punkt hier ist also, dass unser Layout nicht kaputt geht oder albern aussieht. Wenn die Dinge normalerweise im Webdesign etwas vertikal wachsen, möchten Sie die Höhe Ihres Inhalts nicht mikroverwalten. Sie wollen es atmen lassen und seine eigene Höhe durch eigene Schriftgrößen und Auffüllung und Rand bestimmen. Und indem wir ein Bild bereitstellen, das etwas größer ist als die benötigte Fläche, können wir sicherstellen, dass unser Layout jetzt nicht so schnell kaputt geht. Und geben wir ihnen auch einen weißen Hintergrund, damit sie sich von der Hintergrundbild-Hintergrundfarbe Triple F für Weiß abheben. Bisher haben wir von drei neuen Eigenschaften erfahren. Hintergrundbild Hintergrundwiederholung und Hintergrundposition. Jetzt möchte ich Ihnen die Hintergrundgröße vorstellen. So können wir zum Beispiel diesen Bereich etwas weiter unten auf der Seite sehen, auf dem Vögel sind großartig und er hat einen beige oder hellbraunen Hintergrund für den äußeren Kasten. Stellen wir uns vor, wir möchten dieses Foto eines Vogels hinzufügen, um die beige Hintergrundfarbe zu ersetzen. Dieses Foto ist eindeutig viel zu groß. Hier ist die tatsächliche Größe, die perfekt in diese beige Box passt. Aber die Eigenschaft Hintergrundgröße kann den Tag retten. Beginnen wir also damit, dieses Vogelbild zu unserem Bilderordner hinzuzufügen. Vogel, das J-Schwein. Und fügen wir das zu dieser beigen äußeren Box zum inneren H hinzu. T. und jetzt können Sie sehen, dass das nichts anderes ist als ein Div mit einer Klasse von Vögeln. Hier ist die Regel in unserem CSS. Wir können sehen, dass hier die beige Hintergrundfarbe entsteht. Also erstelle ich einfach mal eine neue Regel oder entschuldige mir ein neues Deko-Hintergrundbild. Übung macht den Meister, also üben wir unsere Bildsyntax, indem wir aus dem Ordner springen, in dem sich die CSSA-Datei befindet, und dann in den Bilderordner springen. Der Dateiname ist Vogel J Schwein. Wenn wir uns erfrischen, können wir den Kopf des Vogels sehen. Das Bild hat also eindeutig nicht die richtige Größe. Versuchen wir zumindest, das Bild zu positionieren. Bei horizontaler Hintergrundposition zentrieren wir das Bild und vertikal zentrieren wir das Bild. Zumindest sehen wir jetzt die Mitte des Bildes, aber es ist immer noch zu groß. Hier kommt also die Eigenschaft der Hintergrundgröße ins Spiel. Wir haben die Möglichkeit, einen Breiten- und Höhenwert anzugeben. Wir könnten also sagen, dass das Bild 200 Pixel breit und 120 Pixel hoch sein sollte. Wenn das der Fall wäre, möchten wir natürlich sicherstellen, dass sich das Hintergrundbild nicht wiederholt, 200 Pixel breit und einhundertzwanzig Pixel hoch sind nicht die richtigen Abmessungen. Wir möchten, dass das Bild den gesamten verfügbaren Platz nutzt. Anstatt uns jetzt Sorgen zu machen, die perfekten Pixelwerte zum Einstecken zu finden, können wir einfach ein Rennen fahren und ein Schlüsselwort verwenden, und der Webbrowser wird die ganze schwere Arbeit für uns erledigen. Die Größe des Hintergrundbilds wird automatisch so angepasst, dass es das Element bedeckt oder füllt, auf das das Hintergrundbild angewendet wird. Das mag im Moment vielleicht nicht so groß erscheinen, aber glauben Sie mir, wenn wir später im Kurs anfangen, uns mit flexiblen Layouts und responsivem Webdesign zu beschäftigen, werden wir lernen, dass die Möglichkeit, die Größe von Hintergrundbildern automatisch zu ändern, lebensrettend ist. Bevor wir zum nächsten Thema in dieser Lektion übergehen, möchte ich einen Weg besprechen, wie wir unseren Code viel sauberer machen können. Mit Ausnahme der Hintergrundgröße können wir also alle diese anderen Hintergrundeigenschaften in einer Codezeile kombinieren. Lassen Sie uns also diese Zeilen rennen und eine neue Zeile beginnen, die einfach den Hintergrund liest, und wir werden alle Werte in dieser einen Codezeile bereitstellen. Das erste, was wir tun werden, ist, den Fallback für die einfarbige Hintergrundfarbe bereitzustellen, der diese beige Farbe war. Als nächstes zeigen wir den Browser auf den Speicherort der Bilddatei, damit sie im CSSA-Ordner erscheint und dann in den Bilderordner springen Dateiname war Berdahl groß. Als Nächstes möchten wir die Positionierung des Bildes einbeziehen, so dass wir die Mitte Mitte verwendet haben, und dann können wir angeben, wie das Bild wiederholt oder gekachelt werden soll. Wir sagen also keine Wiederholung, wenn wir speichern und aktualisieren, es ändert sich buchstäblich nichts. Dies ist nur eine effizientere Möglichkeit, all diese Eigenschaften anzugeben, indem mehrere Eigenschaften in einer Codezeile kombiniert werden, die als CSSA-Kurzschrift bezeichnet wird. Jetzt werden Sie sich mit der Zeit mit dieser Syntax vertraut machen, aber wenn Sie gerade erst anfangen, wenn Sie es vorziehen, jeden Wert in der Eigenschaft in einer eigenen Zeile zu verwenden, ist dies absolut in Ordnung, da Sie jetzt mit den Grundlagen von Hintergrundbildern vertraut sind und sogar Kurzschrift. Bevor wir diese Lektion beenden, möchte ich noch ein letztes Thema behandeln, nämlich das Hinzufügen mehrerer Bilder zu einem Element. Unsere erste Aufgabe in dieser Lektion bestand zum Beispiel darin, die grünen und gelben Streifen am oberen Rand unseres Containerelements hinzuzufügen. Was wäre, wenn wir auch die grünen und gelben Streifen ganz unten in unserem Containerelement hinzufügen wollten. Lassen Sie uns zu unseren CSSs wechseln, um den Platz für unser Containerelement zu finden. Hier ist es. Ich beginne damit, alle diese Zeilen mit Kurzschrift in eine Zeile zu reduzieren. Also sagen wir background, wir haben eine Fallback-Farbe von Weiß und zeigen den Browser auf die Bilddatei images color tile dot TNG. Wir möchten, dass es in der linken oberen Ecke ausgerichtet wird. Und wir wollten auf der x-Achse wiederholen. Unser Ziel ist es nun, diese Eigenschaften intakt zu lassen, damit unser Hintergrund an der Spitze erhalten bleibt. Aber wir wollen Code hinzufügen, damit die grünen und gelben Kacheln auch unten sind. Jetzt können wir einer einzelnen Hintergrundeigenschaft mehrere Hintergründe hinzufügen, indem wir das Komma verwenden. Jetzt kann ich einen anderen Hintergrund erstellen, bei dem sich mein Cursor befindet, der über den ursprünglichen Hintergrund gelegt wird und den Browser auf die Farbkachel zeigt oder sagt, dass er in der linken unteren Ecke positioniert werden soll. Und wieder möchten wir entlang der x-Achse wiederholen, wenn wir aktualisieren, können wir sehen, dass wir jetzt den Hintergrund am unteren Rand des Elements haben und auch den Hintergrund am oberen Rand unseres Elements beibehalten. Die Möglichkeit, mehrere Hintergrundbilder zu einem einzelnen hinzuzufügen Element ist unglaublich mächtig. Hier sind ein paar Notizen, mit denen Sie so viele verschiedene Ebenen erstellen können, wie Sie möchten, indem Sie einfach ein Komma nach einer Ebene hinzufügen. Das bedeutet, dass jede Ebene, die Sie zuletzt einschließen, von den vorherigen Ebenen überlappt wird. Auch wenn wir Hintergrundbilder verwenden, sollten wir immer eine solide Hintergrundfarbe bereitstellen, damit selbst wenn die Bilddatei nicht geladen wird, zumindest Besucher eine korrekte Farbe sehen. Jetzt möchten Sie sicherstellen, dass Sie beim Einfügen mehrerer Hintergrundbilder für ein einzelnes Element die Hintergrundfarbe in die letzte oder letzte Ebene einbeziehen. Damit ist diese Lektion abgeschlossen. Wir haben einiges an Material behandelt. Hier also ein kurzer Rückblick. Wir haben die folgenden neuen Eigenschaften gelernt. Hintergrundbildhintergrund ropy background position background size und wir haben auch gelernt, wie man mehrere Hintergrundbilder zu einem einzelnen Element hinzufügt. Ich ermutige Sie, mit diesen neuen Eigenschaften zu experimentieren, indem Sie Ihre eigenen Bilder verwenden, um schöne Designs zu erstellen. Wir sehen uns in der nächsten Lektion