Worte aus Bildern

Sehen wir uns direkt ein Beispiel an...

Dieser Effekt soll erziehlt werden:

Hier erstmal die wichtigsten Styles ohne die übliche Textformatierung, Positionierung, etc. — so einfach geht das etwa für ein div-Element mit Hintergrundbild. 

Das word-break: break-all sorgt dafür, dass lange Wörter nicht entweder abgeschnitten werden oder die Box breiter zerren. Das ist besonders von Bedeutung, wenn der Text variabel aus einer Datenbank kommt. Natürlich kann man in statisch erstellten Fällen den Text so gestalten, dass er "richtig" umbricht.

"Bild-Text" als Mouse-Over-Effekt

In einer Reihe von Bildern kann es gestalterisch manchmal schwierig sein, die gewünschten Bild-Informationen elegant mit unter zu bringen. 

Die hier vorgestellte Technik kann auch hier nützlich sein. Der Trick ist allerdings dabei, ein Element mit Hintergrundbild sich quasi nochmal in sich selbst zu wiederholen — mit dem -webkit-text-fill-color Effekt.

Das eingebettete "Duplikat" wird zunächst mit opacity: 0 geladen und erhält per :hover css-Anweisung dann erst beim Mouse-Over wieder opacity: 1 verpasst. 

Bitte zur Demonstration einmal mit der Maus über das nachfolgende Beispiel fahren:

Dabei ist jedoch besonderes Augenmerk auf die "Deckungsgleichheit" der beiden Elemente zu achten. Im obigen Beispiel ist das noch nicht perfekt gelungen (und Faulheit wird hier jetzt mal mehr oder weniger galant als "Demo" kaschiert). 

Im responsive Verhalten wird die Schrift noch breiter, wenn der Textbereich seine Maximalbreite erreicht hat — dann wird der "Steckerlfisch" irgendwann dreizeilig wobei die dritte Zeile nicht ganz reinpasst. Entsprechend wird das zweite, eingebundene div-Element höher und sein Hingergrundbild passt sich mit an. Da das "Original"-div jedoch nicht mitwächst, ist der Effekt nicht mehr so elegant.

Unter fugen-center.de/Referenzen können Sie sich die Technik in dieser Art und Weise eingesetzt bei einer Bildergalerie ansehen. Wird sie — wie dort — in einem Template eingesetzt, lohnt sich der Aufwand wenigstens. Es empfiehlt sich jedoch ein @media Query nur für Touch-Geräte mit einer alternativen Darstellung für Besucher, die kein Mouse-Over durchführen können.

Kompatibilität

Laut caniuse.com kann bei fast 93% der Nutzer werden die CSS-Eigenschaft -webkit-text-fill-color korrekt dargestellt werden.

Der Internet Explorer schafft das leider noch nicht — falls Sie immer noch damit unterwegs sind, sollten Sie sich bei Gelegenheit mal mit einem "richtigen" Browser das Internet des Jahres 2020 ansehen und eine Überraschung erleben...

Passenderweise klappt aber auch die transparente Schrift nicht, somit sieht das Ergebnis zwar gänzlich anders aus, der Text bleibt aber zumindest auch mit IE sichtbar (in der mit color angegebenen Schriftfarbe). 

Fazit zum Text mit Bildhintergrund

Eine Spielerei, sicherlich. Aber in einem modernen Webdesign kann so ein Bild-Text schonmal ein Hingucker sein...