Möchte man in einem vorgegebenen Link den Text unsichtbar machen und durch ein Hintergrundbild ersetzen, so ist das Erste was einem einfällt color: transparent; für die Linkfarbe. Leider ist diese Eigenschaft nicht spezifiziert in CSS 2.1.
Trotzdem möchte ich eine Möglichkeit zeigen, die nach CSS 2.1 gültig ist und im Internet Explorer 6-8 sowie im Mozilla Firefox funktioniert.
Einfache Lösung
HTML-Element:
<ul> <li> <a href="..">Link</a> </li> </ul> |
CSS-Formatierung:
ul li a { display: block; overflow: hidden; width: 0; padding-left: 146px; height: 217px; background-image: url(./grafik/hintergrund.png); } |
Der Trick daran ist, dass durch width: 0; der Link unsichtbar wird aber durch padding-left: 146px; die Breite erreicht wird, die das Hintergrundbild benötigt. Die Eigenschaft height: 217px; legt die Höhe des Hintergrundbildes fest. Mit display:block; und overflow: hidden; wird es dann möglich, dass ein blockartiges Hintergrundbild als Linktext-Ersatz verwenden werden kann.
Browserkompatible Lösung
Im Apple Safari funktioniert der oben genannte Trick leider nicht, deshalb muss man einen anderen Weg gehen. Hier bietet es sich an, den Linktext in einem span-Element unterzubringen und das span-Element dann nicht anzuzeigen.
HTML-Element:
<ul> <li> <a href=".."><span>Link</span></a> </li> </ul> |
CSS-Formatierung:
ul li a { display: block; overflow: hidden; width: 0; padding-left: 146px; height: 217px; background-image: url(./grafik/hintergrund.png); } span { display: none; } |
Die „einfache Lösung“ funktioniert leider nicht im Apple Safari 5.0.1. 🙁
Danke funktioniert perfekt