(transparente) Inline-Grafik erstellen

[Dracus]

Hi =)

Ich möchte eine Grafik direkt in ein Stylesheet einbinden und deshalb in eine sogenannte "Inline-Grafik" (?) umwandeln. Habe mich bei Google schon untern Tisch gesucht und finde einfach nichts außer Umwandlungsmöglichkeiten von Text.
Bei SelfHTML habe ich schon einen Artikel zu dem Thema gefunden (http://aktuell.de.selfhtml.org/artikel/grafik/inline-images/) und nach Anleitung versucht, mir via Mailprovider den Code eines Bildes zu holen. Benutze GMX, dort wird das Bild scheinbar auch als solches gespeichert, sodass ich eben nicht an den Code gekommen bin. Hätte auch lieber ein (Offline-)Programm, das nicht so umständlich ist. Das Bild wieder decodieren brauche ich nicht unbedingt.

Ist es überhaupt möglich, mit diesem Verfahren eine transparente Grafik zu erstellen? Würde nur eine einzelne Farbe transparent machen, also keine Teiltransparenz (außer natürlich es ist möglich ;) ).

Danke
Dracus

[Bork zum Iork]

Bei SelfHTML habe ich schon einen Artikel zu dem Thema gefunden (http://aktuell.de.selfhtml.org/artikel/grafik/inline-images/) und nach Anleitung versucht, mir via Mailprovider den Code eines Bildes zu holen. Benutze GMX, dort wird das Bild scheinbar auch als solches gespeichert, sodass ich eben nicht an den Code gekommen bin.

Dann hast Du etwas verkehrt gemacht. Du schickst Dir das Bild als E-Mail-Anhang und musst Dir dann den Quelltext der E-Mail anschauen (meist im Menü Ansicht). Das geht aber nur, wenn Du nicht den Webmail-Zugang von Was-auch-immer benutzt, sondern ein echtes E-Mail-Programm auf Deinem Rechner.

Es geht aber auch anders, schaue im Netz nach einem base64-Encoder, zum Beispiel mit base64 encoder windows. Auf *ix-Systemen sollte ein solcher Encoder zum Standardumfang gehören.

Ist es überhaupt möglich, mit diesem Verfahren eine transparente Grafik zu erstellen?

Das ist unerheblich. Die Transparenz steckt im Dateiformat des Bildes, die base64-Kodierung sorgt lediglich dafür, dass die Binärdaten bzw. die Bilddatei als Text in die HTML-Seite eingebunden werden kann.

[Dracus]

» Dann hast Du etwas verkehrt gemacht. Du schickst Dir das Bild als E-Mail-Anhang und musst Dir dann den Quelltext der E-Mail anschauen (meist im Menü Ansicht). Das geht aber nur, wenn Du nicht den Webmail-Zugang von Was-auch-immer benutzt, sondern ein echtes E-Mail-Programm auf Deinem Rechner.

Ja, das stimmt wohl. Habe es in eine HTML-Mail eingebunden und nicht angehangne.

Es geht aber auch anders, schaue im Netz nach einem base64-Encoder, zum Beispiel mit base64 encoder windows. Auf *ix-Systemen sollte ein solcher Encoder zum Standardumfang gehören.

Habe jetzt einen gefunden (http://www.motobit.com/util/base64-decoder-encoder.asp), mit dem man auch Bilder "umwandeln" kann.

Jetzt habe ich allerdings eine weitere Frage:
Es ist natürlich äußerst unpraktisch, mitten in der CSS-Datei so einen riesigen Text zu haben. Kann ich vielleicht den Text am Ende der Datei eintragen und dann auf diesen Verweisen, sodass meine CSS-Datei noch übersichtlich bleibt? Also ...

div{background: url(data:image/png;base64,[Verweis]
[ganz viele andere Angaben]
[Verweis] Text im Bildformat

Schwer zu erklären, ich weiß. ;)

Danke für die Hilfe schon mal. =)

[Bork zum Iork]

Es ist natürlich äußerst unpraktisch, mitten in der CSS-Datei so einen riesigen Text zu haben. Kann ich vielleicht den Text am Ende der Datei eintragen und dann auf diesen Verweisen, sodass meine CSS-Datei noch übersichtlich bleibt?

Ich denke nicht, das Einbinden ist ja eh schon ein Sonderfall, dass da noch großartiges Hin- und Herweisen innerhalb der Datei vorgesehen wurde, mag ich nicht so recht glauben.

Lege die Grafik doch ans Ende der Datei und platziere am ursprünglichen Ort einen Kommentar mit einem Hinweis; und Du kannst die Regeln ja auch trennen, oben alles "Normale", unten nur die Grafik. Das ist letztlich das Gleiche, was Du Dir vorgestellt hattest, nur ohne spezielle CSS-Funktionalität.

div#bla {
    bla:fasel;
    blo:fosel;
    /* Grafik für Hintergrund am Ende */
}

klin.gel#ing {
    …
}

/* Hintergrundgrafik für div#bla, Rest oben */
div#bla {
    background-image:url(data:image/png;base64,AD4468 …
}

[Dracus]

Ich denke nicht, das Einbinden ist ja eh schon ein Sonderfall, dass da noch großartiges Hin- und Herweisen innerhalb der Datei vorgesehen wurde, mag ich nicht so recht glauben.

Schade, hätte ich angenehmer gefunden, aber danke für die Mühen. =)

[plan_B]

hallo,

fast hätte ich geschrieben, sowas kann man in CSS nicht definieren.
Aber es geht doch, und einige Browser werden es verstehen. Hier ein Schnipsel aus dem ACID2 Test

  
.forehead { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); /* that's a 1x1 yellow pixel PNG */ }  

wie base64 speichern?
Opera bietet die Möglichkeit, Seiten als Webarchiv (single file, *.mht) zu speichern. Diese Methode geht einfacher als mit Emails zu hantieren.

Gruß plan_B