在CSS中实现A HREF的背景图像

Question

我在HTML中有一个href,我从服务器动态生成.我设计了一个漂亮的圆角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背景图像是最好的方法？

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.但是,如上所述,这可能是个人主观的事情.

回答编辑以回应timbo的评论.

此外,这不是特别漂亮,这里有一个代码演示: http://davidrhysthomas.co.uk/so/a-img-bg.html