Как сделать фоновую картинку ссылкой?

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

С точки зрения семантики все стилевые картинки должны быть заданы в CSS. А в тег img нужно вставлять только контентные картинки, без которых смысл текста на странице становится не понятен. Но что делать если картинка в CSS должна быть ссылкой? Сегодня мы об этом поговорим.

Итак, начнем сразу с примера. Есть HTML.

1
2
3
4
5
6
<p id="content">
  Я продолжать не может конечно<br />
  Что да радость не стоит еще бы<br />
  Бытие стандарты в скриптов да<br />
  И можно лазать должен там
</p>

И стили к нему:

1
2
3
4
5
6
7
8
9
p#content {
  position:relative;
  font:normal 1.2em/1.4em georgia, serif;
  border:4px solid #888;
  background: #fff url(code.jpeg) no-repeat 350px center;
  padding:18px;
  margin:20px 0;
  color:#800000;
}

Сейчас это выглядит так.

Вставляем ссылку

Новый код со вставленной ссылкой на Front-End:

1
2
3
4
5
6
7
<p id="content">
  Я продолжать не может конечно<br />
  Что да радость не стоит еще бы<br />
  Бытие стандарты в скриптов да<br />
  И можно лазать должен там
  <a id="link" href="http://frontendme.ru"></a>
</p>

Теперь добавляем стили к нашей ссылке:

1
2
3
4
5
6
7
8
p#content a#link {
  display:block;
  width:111px;
  height:128px;
  position:absolute;
  top:8px;
  left:350px;
}

Теперь посмотрите на наш параграф снова.

Спасибо.


Метки: ,
Связанные записи:
Свои выделяемые шрифты
  • Опубликовано: Сентябрь 14th, 2009
  • Категория:/ HTML /
Rss Commenti

1 Ответ

  1. Глупость! Что будет в вашем случае, если пользователь отключит картинки? Он просто не увидит ссылку.
    Если вы ставите на изображение ссылку, то значит это контентная картинка и ее нужно вставлять тегом img.

    #1 dec5e

Оставить комментарий





О проекте

Publications feed