Question

我基本上寻找的是一种方法，在特定位置的图像上放置一些文本，在这种情况下是链接，最好是坐标。我知道有一种方法可以通过usemap在图像上放置一个链接，但据我所知，它只能将链接变成一个形状，如矩形或圆形。

我已经找到了一种方法，但到目前为止已经很短了，我希望有人可以帮助一点。

Answer 1

您可以将图像用作<div>或任何其他块级元素的背景（使用css类或样式属性），然后将文本放在其上，不会有效吗？也许使用position来微调div中的文本。

Answer 2

要完成此操作，请使用以下标记：

<div class="container">

    <img src="image.jpg">

    <span class="some-text">Some Text</span>

</div>

与以下CSS结合：

div.container {
    position: relative;
}

span.some-text {
    position: absolute;
    bottom: 0;
    left: 0;
}

在此示例中，包含文本的position: absolute;范围似乎位于图像的左下角（尽管如此，它位于图像父容器的左下角，即{{1} }）。根据需要更改这些定位值，例如： position: relative;，top: 5%;或类似内容。

您也可以按照建议的上一个答案进行操作，并将图像设置为容器元素的right: 25px;。两种解决方案都有效。但是，如果使用该解决方案，则必须定义父background-image容器的维度。我的回答不需要这样，因为<div>内的<img>会强制<div>自动与<div>一样大。

Answer 3

<div style="position:relative">
    <img src="http://www.example.com/blahblah.jpg">
    <a style="position:absolute; left:0px; top:0px;" herf="http://www.example.com">Some link</a>
</div>

您需要在元素中包含该链接，并为position relative提供position，同时为链接元素absolute left，并设置{{1} }}，top，bottom和/或right

Answer 4

不确定这会有所帮助，但有一个网站提供有关HTML CSS java和asp的信息以及该网站的更多语言：

http://www.w3schools.com希望这会有所帮助

在文本顶部放置文本（或链接）

4 个答案: