Пример на Css как оформить ссылку с картинкой.

В своей работе приходится также заниматься html-версткой. Поэтому иногда  буду в блоге размещать примеры на Css.

Итак, первый пример. Как оформить ссылку с картинкой на Css для продвинутых.

Первое время использовал это вариант:

<a href="#" title="Ссылка" ><img src="картинка.png" alt="Картинка" width="100" height="100"/></a>

Но, как оказалось, для поисковой оптимизации (СЕО) этот способ не совсем удачный - в ссылке должен быть текст.

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

<a href="#" title="Ссылка" class="link">Ссылка</a>

код для css файла

a.link{
  display: block;
  overflow: hidden;
  background: url('картинка.png ') no-repeat;
  width: 100px;
  height: 100px;
  text-indent: -9000px;
}