ZODIOS.net

Как подставить текст под бекраунд

10.8.2008  –  Рубрика: HTML&CSS

Не редко возникает необходимость заменить какую-то картинку текстом, то есть поместить под картинку текст. Например, сделать так, чтоб под картинкой логотипа находился текст и при отключении графики на странице было видно этот текст. Или, например, продублировать текст на картинке текстом под ней, чтоб поисковые боты могли проиндексировать его (вопрос белизны этого метода – отдельный разговор). В этой заметке, представлены основные методы, которые я смог «откопать» в сети. Выбирались методы, которые не предусматривают подключение сторонних джава скриптом или флеш объектов.

Метод FIR (Fahrner Image Replacement)

Этот метод, придуманный Тоддом Фарнером, является довольно простым и оригинальным. Этот метод является наиболее популярным. Концепция метода состоит в том, что текст внутри блока берется в оболочку, которой присваивается display:none;

<h1>
	<span>Метод замены текста изображением  FIR</span>
</h1>

h1 {
width:150px;
height:150px;
background:url(images.gif) no-repeat;
}

h1 span {
display:none;
}

Недостаток метода в том, что при отключенной графике этот способ замены текста картинкой не отображает текст, который должен быть под картинкой. Таким образом, он подходит больше для поисковой оптимизации, когда необходимо продублировать текст на картинке.

Метод Phark

Майк Рандл разработал метод замены текста картинкой, в котором нет необходимости добавлять несемантические элементы. Метод Phark работает таким образом, что текст в блоке выкидывается за грани окна браузера путем присваивания тексту большого отрицательного отступа text-indent.

<h1>
	Метод замены текста изображением  Phark
</h1>

h1 {
width:150px;
height:150px;
text-indent:-5000px;
background:url(images.gif) no-repeat;
}

Так же как и предыдущий способ размещения текста под картинкой, этот не позволяет отображать текст под картинкой при отключении графики. Еще один недостаток метода в том, что браузер FireFox во время клика по ссылке выделяет ее и ссылка у которой стотит этот IR имеет рамку ширина которой выходит за грани браузера. Но эту проблему можно решить через свойство outline, подробней в заметке Три полезные мелочи для верстки.

Метод замены текста картинкой MIR

Метод похожий на Phark, только имеет чуть другу структуру.

<h1>
	Метод замены текста изображением  MIR
</h1>

h1 {
letter-spacing :-1000em;
width:200px;
height:80px;
background:url(images.gif) no-repeat;
}

Метод Leahy/Langridge.

Метод состоит в «Выпихивании» текста верхним внутренним отступом за грани блока.

<h1>
	Метод замены текста изображением  Leahy/Langridge
</h1>

h1{
padding: 80px 0 0 0;
overflow: hidden;
Background:url(images.gif) no-repeat;
height: 0px !important;
}

Метод Гилдера-Левина (Pixy)

Этот трюк замены текста картинкой, созданный Томом Гилдером и Александром Левиым, возможно, самый удобный метод. Он позволяет отобрать текст под картинкой с отключенной графики. Единственный его недостаток в том, что добавляется несемантические элементы. Суть метода состоит в том что в блоке фиксированных размеров, в котором находится текст помещается конструкция которая имеет абсолютное позиционирование и фон, таким образом перекрывает текст.

<h1>
	Метод замены текста изображением  Pixy<span></span>
</h1>

h1 {
position:relative;
width:150px;
height:150px;
text-indent:-5000px;
}
h2 span {
position:absolute;
width:100%;
height:100%;
background:url(images.gif) no-repeat;
}

При использовании этого метода, перекрывающие изображение должно иметь сплошной фон иначе текст будет просвечиваться через картинку.

Tags: CSS, HTML