Share
In diesem Schnelltipp zeige ich Ihnen, wie Sie mit einem beliebigen Bild und ein paar CSS-Zeilen einen schönen Hintergrund mit Farbverlauf erstellen. Darüber hinaus werde ich über die Leistung sprechen und die Eigenschaft der Hintergrundanhänge im weiteren Verlauf erläutern.
Wir leben in einer Welt, in der das Web (verständlicherweise) CSS und vom Browser erzeugte Visuals gegenüber Bildern bevorzugt. Bilder haben eine begrenzte Auflösung, was sie ziemlich unflexibel macht. Sie können sich auch auf die Leistung einer Website auswirken, wodurch mehr Serveranforderungen und Bandbreite entstehen.
Manchmal können wir uns jedoch auf Bilder stützen, um schöne Bilder zu erhalten. Sie müssen in Bezug auf die Dateigröße oder Auflösung nicht groß sein, und der Effekt wird auch bei Hi-Res- und Retina-Displays nicht beeinträchtigt. Schauen wir uns ein Bild (anstelle von CSS) für einen Hintergrund mit Farbverlauf an.
Wenn Sie Bilder verwenden, ändern oder freigeben möchten, ohne hart verdientes Geld auszugeben, können Sie sich immer auf die erweiterte Bildersuche von Google verlassen. Am unteren Rand der Seite können Sie auswählen, welche Art von Nutzungsrechten Sie durchsuchen möchten. In diesem Fall werde ich ein Bild verwenden, das geteilt, geändert und frei verwendet werden kann.
Öffnen Sie Photoshop und erstellen Sie eine neue Datei. Stellen Sie die Breite auf 300px, die Höhe auf 300px und die Auflösung auf 72 PPI ein.
Importieren Sie nun das Bild, das Sie ändern möchten, als Hintergrund mit Farbverlauf und skalieren Sie es proportional zur Leinwandgröße.
Um einen coolen Verlauf zu erhalten, klicken Sie auf Filter> Weichzeichnen> Gaußscher Weichzeichner und setzen Sie ihn auf 40 (in Ihrem Fall können Sie die Anzahl je nach Bild erhöhen oder verringern). Das ist es.
Wenn Sie faul sind, können Sie auch 100 Free Blurry Textures auf pepsized.com ansehen.
Nach diesen ersten Schritten ist es an der Zeit, den Farbverlaufshintergrund zu speichern und die Größe so weit wie möglich zu reduzieren, während die vernünftige Qualität erhalten bleibt. Klicken Sie auf Datei> Für Web speichern und stellen Sie das Bildformat auf JPEG ein.
Nun zur Kompression. Beim Ändern der Qualität (Maximum, Sehr Hoch usw.) wird eine Vorschau des Endergebnisses angezeigt. Gehen Sie so tief wie möglich, geben Sie die Feinabstimmung ein, indem Sie den tatsächlichen Wert in das Qualitätsfeld eingeben (in diesem Fall 80) und „Unschärfe“ auf 2 setzen. Durch Erhöhen der Unschärfe wird die Dateigröße ein wenig stärker und die Pixelierung wird weiter verringert.
Aktivieren Sie "Progressiv". Dies beeinflusst, wie das Bild in den Browser geladen wird. Progressives Laden bedeutet, dass es in mehreren Durchgängen geladen wird. es wird zuerst vollständig in niedriger Qualität geladen, dann ein wenig höher, dann ein bisschen höher, anstatt Zeile für Zeile zu laden.
Klicken Sie auf "Speichern", um das Verlaufsbild zu speichern. Unten links im Fenster sehen Sie, wie niedrig Sie Ihre Bildgröße erhalten haben.
Wenn Sie sich für die Einstellungen entschieden haben, die Sie für geeignet halten, können Sie diese Einstellungen für einen schnellen Zugriff in der Zukunft speichern. Bevor Sie auf "Speichern" klicken, klicken Sie auf das kleine Menüsymbol oben rechts im Dialogfeld "Für Web speichern" und klicken Sie auf "Einstellungen speichern"..
Obwohl wir ein kleines Bild erstellt haben, kann es aufgrund seiner unscharfen Beschaffenheit effektiv auf viel größere Auflösungen ausgedehnt werden, ohne die Qualität sichtbar zu beeinträchtigen. Um dieses Bild in den Hintergrund Ihrer Website zu laden, verwenden Sie dieses kleine CSS-Snippet:
Accentsconagua
body margin: 0; Hintergrund: URL ('img / bg.jpg'); Hintergrundgröße: 100% 100%; Hintergrundaufsatz: feststehend; Marge: 0 - Dies ist möglicherweise nicht erforderlich, wenn Sie Ihr CSS zu Beginn ordnungsgemäß zurückgesetzt haben. Es entfernt Leerzeichen um Ihr Bild oder Kanten im Ansichtspunkt Ihres Browsers.Hintergrund: URL ('bg.jpg') - Pfad zu Ihrem Hintergrundbild. Stellen Sie den Pfad innerhalb der ein URL (").Hintergrundgröße: 100% 100%; - Dies passt die Breite und Höhe Ihres Hintergrundbildes an. Der erste Wert ist width, der zweite ist height. Der Grund, warum ich ein Prozent-System gewählt habe, ist, dass es auf jedem Gerät dieselbe relative Größe wie das Ansichtsfenster hat, abhängig vom eingestellten Wert. 100% füllt den Darstellungsbereich des Browsers.Hintergrundbefestigung: behoben - Mit dieser Eigenschaft können Sie festlegen, ob der Hintergrund scrollbar oder fest ist. In unserem Fall möchten wir, dass unser Hintergrund fixiert wird. Es wird nicht mit dem Inhalt gescrollt. Ich werde weiter unten ausführlicher auf diese Eigenschaft eingehen.Ein Nachteil bei der Verwendung von Bildern ist, dass durch das Einfügen der Bilder in den Browser eine zusätzliche Serveranfrage hinzugefügt wird. Die Anzahl der parallelen Anforderungen, die gestellt werden können, ist begrenzt. Daher kann es zu Engpässen kommen, wenn viele Assets heruntergeladen werden. Um dies zu umgehen, können Sie Ihr Bild in Base-64 konvertieren und es mithilfe eines Daten-URIs direkt in Ihre CSS-Datei einfügen.
Es gibt viele Dienste, die diese Aufgabe für Sie erledigen, aber das selbsternannte "super simple dataURI-Tool" duri.me ist einfach zu bedienen.
Weitere Informationen zur Funktionsweise finden Sie in den Einführungsdaten-URIs von Chris Brown.
Schauen Sie sich unser kleines 300px-Bild an, das sich über den gesamten Ansichtsbereich erstreckt. Sie können sich auch die Live-Demo ansehen.
Hintergrundanhang Die Eigenschaft Hintergrundanhang wird meistens verwendet, um festzulegen, ob Hintergrundbilder relativ zu ihrem übergeordneten Element einen Bildlauf durchführen oder fixiert werden sollen.
Wir haben es in seiner einfachsten Form verwendet:
body Hintergrundbild: URL ("img / imgname.png"); Hintergrundaufsatz: feststehend; Es unterstützt auch mehrere Hintergrundbilder und akzeptiert selbst mehrere durch Kommas getrennte Werte. In diesem Beispiel wird das erste Hintergrundbild ("image1.png") gescrollt, das zweite ("image2.png") wird korrigiert:
body Hintergrundbild: URL ("image1.png"), URL ("image2.png"); Hintergrundanhang: scrollen, fixiert; Schauen Sie sich die Demo an.
Dies ist ein einfacher Weg, um coole Gradienten als frischen Hintergrund für die Website in Minuten zu erreichen. Vergessen Sie nicht abzuwägen, ob Sie denken, dass es sich lohnt, stattdessen CSS-Farbverläufe zu verwenden, aber ich hoffe, Ihnen hat dieses Tutorial gefallen - danke, dass Sie es gelesen haben!
