CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Некоторые техники замены текста картинками (image replacement)

Обзор некоторых способов замены текста картинками.

Зачем?

1. <h1>Заголовок - картинка</h1>

1. Способы без добавления HTML

1. h1{
2. text-indent: -9000px;
3. overflow: hidden;
4. height:80px;width:200px;
5. background-image: url("img.gif");
6. }

2. Метод Leahy/Langridge (подробнее)

1. h1{
2. padding: 80px 0 0 0;
3. overflow: hidden;
4. background-image: url("img.gif");
5. height: 0px !important; /* для большинства броузеров */
6. height /**/:80px; /* для блочной модели IE5.5 */
7. }

3. MIR (Malarkey Image Replacement) (подробнее)

1. h1{
2. letter-spacing :-1000em;
3. height:80px;width:200px;
4. background-image: url("img.gif");
5. }

2. Способы c добавлением HTML

1. <h1>Заголовок - картинка<span></span></h1>

1. h1{
2. margin:0; padding:0;
3. position:relative;
4. width:200px; height:80px;
5. overflow:hidden;
6. }
7. h1 span {
8. display:block;
9. position:absolute; left:0; top:0; z-index:1;
10. width:200px; height:80px;
11. background:url("img.gif") top left no-repeat;
12. }

1. <h1><img src="pic.gif" />Заголовок - картинка</h1>

1. h1 {
2. height:80px;
3. width:200px;
4. overflow:hidden;
5. position:relative;
6. }
7. h1 img {
8. z-index:1;
9. position:absolute;
10. top:0;
11. left:0;
12. }

Другие способы

1. h1 {
2. content: url(img.gif);
3. }

Ссылки

• Мои примеры - для теста
• Revised Image Replacement
• CSS Image Replacement and Alternatives to CSS Image Replacement