PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

CSS

5+ CSS-Methoden um Text durch Bilder zu ersetzen

| 5 Kommentare

Die wohl bekannteste Methode, Text durch ein Bild zu ersetzen (z.B. in einem Logo), ist wahrscheinlich die -9999px-Variante.  Ein Artikel im 37signals-Blog brachte mich dazu, über weitere Methoden nachzudenken. – In diesem Artikel habe ich sie zusammengefasst.


Methode 1 – text-indent: -9999px

1
2
3
4
5
6
7
8
#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png);
    
    overflow: hidden;
    text-indent: -9999px;
}

Der Klassiker muss hier natürlich erwähnt werden. 😉

Methode 2 – line-height: 9999px

1
2
3
4
5
6
7
8
#logo {
    width: 200px;
    height: 50px;
    background-image: url(logo.gif);
    
    overflow: hidden;
    line-height: 9999px;
}

Ist mir erst vor Kurzem zufällig auf Spreeblick aufgefallen.

Methode 3 – display: none

1
2
3
4
5
6
7
8
9
#logo {
    width: 200px;
    height: 50px;
    background-image: url(logo.gif);
}
 
#logo span {
    display: none;
}

Diese Methode erfordert ein zusätzliches <span>-Element.

Methode 4 – height: 0

1
2
3
4
5
6
7
8
9
#logo {
    width: 200px;
    padding-top: 50px;
    background: url(logo.png);
    
    height: 0;
    overflow: hidden;
    display: inline-block;
}

Hier wird padding-top für die Höhe des Bilder verwendet. Quelle: Another -9999px

Methode 5 – text-indent: 100%

1
2
3
4
5
6
7
8
9
#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png);
    
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

Performanter als die -9999px-Variante, da hier keine riesige Box vom Browser gerendert werden muss. Quelle: Replacing the 9999px hack (new image replacement)

Methode 6 – Glider/Levin

1
2
3
4
5
6
7
8
9
10
11
12
#logo {
    width: 200px;
    height: 50px;
    position: relative;
}
 
#logo span {
    background: url(logo.png) no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;   
}

Quelle: Glider-/Levin-Methode

Methode 7 – Pseudo-Elemente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#logo {
   width: 200px;
   height: 50px;
 
   padding: 0;
   margin: 0;
   overflow: hidden;
}
 
#logo:before {
   content: url(logo.png);
   display: inline-block;
   font-size: 0;
   line-height: 0;
}

Quelle: CSS image replacement with pseudo-elements (NIR)

Methode 8 – font: 0/0 a

1
2
3
4
5
6
7
8
9
10
11
#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png);
 
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Quelle: Update CSS image replacement technique (HTML5 Boilerplate)

Die Snippets habe ich auch als Gist auf GitHub angelegt. Alle meine Gists sind außerdem nach Kategorie sortiert im Snippet-Bereich meiner DevZone zu finden.

Welche von den oben genannten Methoden nutzt ihr?
Oder gibt es vielleicht noch bessere Wege?

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!
  • Hi,

    mich wundert etwas das die ihmo beste Methode (Image Replacement nach Gilder/Levine : http://meiert.com/de/publications/articles/20050513/#toc-gilder-levin) nicht erwähnt wird. Da wird das Bild ja nur über den Text geschoben.

    Der Klassiker hat leider eine CSS an/Bilder aus-Problematik.
    Die display:none-Methode halte ich für komplett ungeeignet, weil die Screenreader den Text dann nicht mehr vorlesen. 😉

  • Habe die Glider-/Levin-Methode und zwei weitere hinzugefügt. Mein Favorit ist die Methode 8, die momentan in der HTML5 Boilerplate verwendet wird.

  • Sascha

    Ich würde gerne wissen welche Methode die beste ist und warum oder warum die anderen es nicht sind.

  • Gute Zusammenfassung, allerdings fehlt mir hier eine Bewertung. Wie sieht es mit der Browserkompatibilität aus?

  • coole Sammlung,
    ich benutze bisher meist:

    width:200px;
    height:50px;
    background-img:url( …);

    color:rgba(0,0,0,0);
    overflow:hidden;

    ein bissel von allen 🙂 !