在图像上放置文本（或链接）

-2

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

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

2013-05-09 peter jensen

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480021/Text-Over-Images.htm – 2013-05-09 14:21:32

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

你需要包含一个元素的链接，并给它的relative一个position同时给予链接元素的absolute一个position，并设置left，top，bottom，和/或right

来源

2013-05-09 14:28:19

这个诀窍，谢谢。我以另一种方式思考，所以我认为它比实际上更成问题。 – 2013-05-09 15:38:48

您可以使用图像作为<div>或任何其他块级元素的背景（使用css类或样式attrib），然后让您的文字在上面，不会那么工作？也许用position来微调div中的文字。

来源

2013-05-09 14:22:04

要做到这一点，使用的标记类似如下：

<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;跨度似乎被定位在图像的左下角（尽管真的，它位于图像的父容器的左下角，即position: relative;）。根据需要更改这些定位值以满足您的需求，例如top: 5%;，right: 25px;或类似的。

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

来源

2013-05-09 14:27:36

谢谢，这与Patrick Evans的答案一起解决了它。 – 2013-05-09 15:39:23

不相信这将有助于但有关于HTML CSS Java和ASP和一些语言的网站是信息网站：

http://www.w3schools.com希望这有助于

来源

2013-05-09 14:49:48

在图像上放置文本（或链接）

回答

相关问题