在圖像上放置文本（或鏈接）

-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

在圖像上放置文本（或鏈接）

回答

相關問題