background-image: url(data:image/png;base64,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);Rauschdaten-URI-Bild
Chris Coyier am
Was soll das?
Mit den Fortschritten in CSS ist die Erstellung komplizierter Bilder nicht mehr auf ein hartes Abhängigkeitsverhältnis zu Werkzeugen wie Photoshop angewiesen. Wir haben jetzt Unterstützung für mehrere Hintergründe auf Elementen sowie für halbtransparente Farben und verschiedene Farbverläufe. Eine Sache, die wir nicht generieren können, ist Rauschen – da gibt es immer noch keine Optionen.
Im Laufe der Jahre habe ich Photoshop immer weniger benutzt. Es war für abgerundete Ecken, aber dann bekamen wir border-radius. Ich benutzte auch Photoshop für Schatten, aber dann bekamen wir box-shadow und text-shadow. Ich benutzte es, um PNG-Dateien zu generieren, aber dann kam die solide Unterstützung für Transparenz und rgba-Werte. Heute ist das Einzige, wofür ich noch ein Grafikprogramm benötige, die Rauschgenerierung.
Vielen Dank für das Teilen dieses Snippets, Chris. Ich stellte wieder einmal fest, dass ich etwas Rauschen wollte, und freute mich zu sehen, dass Sie eine Daten-URI bereit hatten.
Dies zeigt eine Base64-Kodierung eines Bildes in CSS. Mit dieser Technik können Sie viele Anfragen sparen, ohne Sprites zu verwenden, da das Bild in die CSS-Datei eingebettet ist (was auch die Größe der CSS-Datei aufbläht, aber das ist kein großes Problem). Das kann man nur bei Bildern mit einer Größe von etwa 24 KB tun, da IE (wie immer) damit Probleme hat ...
Daten-URIs werden in Internet Explorer seit Version 8 unterstützt, und die aktuelle Grenze liegt bei fast 33.000 Zeichen – falls Sie so viele benötigen.
Ein weiterer erwähnenswerter Punkt, den wir im Mozilla Developer Network lesen, ist "...Browser sind nicht verpflichtet, eine bestimmte maximale Länge von Daten zu unterstützen..."; daher können wir keinem Anbieter einen Vorwurf machen, wenn er sich für ein kleineres Limit entscheidet.
Ich habe bisher noch keinen Fall gesehen, in dem es sinnvoller wäre, Zehntausende von Zeichen in einer Daten-URI zu verwenden, anstatt stattdessen eine tatsächliche Bilddatei zu laden.
Wo kann ich Daten-URI-Bilder generieren?
danke.
Versuchen Sie: datauri.net
Laden Sie Emmet herunter, es ist erstaunlich, ich benutze es in Sublime Text.
Solange sich Ihr Cursor auf der Bild-URL befindet, die Sie kodieren möchten, drücken Sie Strg + Umschalt + D
http://docs.emmet.io/actions/base64/
https://codeblock.at/base64-noise-generator/
Hier ist ein Werkzeug zur Erstellung von verrauschten Base64-Bildern
http://codeblock.at/base64-noise-generator/