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!