php - 在图像顶部放置文本（或链接）

Question

我基本上正在寻找一种将一些文本（在这种情况下为链接）放置在特定位置的图像顶部的方法，最好使用坐标。我知道有一种方法可以通过 usemap 在图像上放置链接，但据我所知，只能将链接制作成矩形或圆形等形式。

我一直在寻找一种方法，但到目前为止还不够，我希望有人可以提供一点帮助。

Answer 1

<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>

您需要在一个元素中包含链接并给它一个positionofrelative同时给链接元素一个positionof absolute, 和设置left, top, bottom, and/orright

Answer 2

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

Answer 3

为此，请使用如下标记：

<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;包含您的文本的 span 似乎位于图像的左下角（尽管实际上，它位于图像的父容器的左下角，即position: relative;）。根据需要更改这些定位值以满足您的需要，例如top: 5%;、right: 25px;或类似名称。

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

Answer 4

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

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