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

Answer 2

您必须将链接设置为display: block

Answer 3

显示：阻止a或将背景图像附加到h2。无论哪种方式，如果您使用的是白色文本，请务必在a或h2上设置背景颜色。如果有人打开CSS并关闭图像，他们就不会看到你的链接了。意味着您可能需要将圆角图像的角填充到页面的bg颜色。

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

3 个答案: