Реализация фонового изображения для HREF в CSS

Question

У меня есть href в HTML, который я динамически генерирую с сервера. Я разработал красивое gif-изображение с закругленными углами, которое я хотел бы использовать в качестве фона, то есть поместил текст (белым цветом) поверх gif-изображения и оставил его для связи.

Текущий HTML выглядит так:

<h2>
  <!--img src="images/greenback.gif"-->
  <a id="site-title0" class="titletext" href="#">
    Alligator Creek, Bowling Green Bay National Park
  </a>
</h2>
<div id="descrip0" class='description'>
  20km S of Townsville. $4.85/night. Gates close...

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

Или, может быть, лучше использовать CSS background-image?

Answer 1

Как говорит Даниил, действительно:

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                   background: #fff url(path/to/image.gif) top left no-repeat; 
                   text-align: center;
                   line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */

Я бы также - а это может быть просто личная привычка, аффект и полученная «мудрость» - предложите использовать .png вместо .gif. Но, как уже отмечалось, это, скорее всего, личная и субъективная вещь.

Ответ отредактирован в ответ на комментарий Тимбо.

Кроме того, и это не очень красиво, здесь есть демонстрационная версия кода: http://davidrhysthomas.co.uk/so/a-img-bg.html

Answer 2

Вы должны установить ссылку на display: block

Answer 3

Дисплей

: блокировка на a или прикрепление фонового изображения к h2. В любом случае, не забудьте установить цвет фона на a или h2, если вы используете белый текст. Если у кого-то включен CSS и изображения выключены, они не увидят вашу ссылку. Это означает, что вам может потребоваться заполнить углы изображения с закругленными углами до уровня цвета страницы.