PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

CSS

5+ CSS-Methoden um Text durch Bilder zu ersetzen

6. März 2012 von Phil | 4 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!

4 Kommentare

Schreibe einen Kommentar →

  1. Klaus
    6. März 2012 um 13:12 Uhr

    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. ;)

  2. Phil
    7. März 2012 um 10:44 Uhr

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

  3. Sascha
    7. März 2012 um 22:31 Uhr

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

  4. Michael
    8. März 2012 um 17:51 Uhr

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

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.