具有href样式的图片问题

Question

我正在尝试在下面的图像上创建href ，如下图所示。我不知道如何设置它。我已经尝试过像这样的代码，但是没有用。在这里提交您的祷告将是红色的链接。我的代码是：

<div class="col-md-4">
<img src="images/prayer.jpg" />
<a class="pray" href="a.com">Submit your prayer request</a>
</div>

反射图像

Answer 1

如果您希望图片具有href链接，那么任何人单击图片时都应将其带到您想要的链接，就像文本链接一样，因此请对代码进行一些小的更改，

只需将您的标签像波纹管一样包装在标签上即可。

<div class="col-md-4">
<a class="pray" href="a.com"><img src="images/prayer.jpg" />Submit your prayer request</a>
</div>

Answer 2

您必须在图片之前添加锚（“ a”）标签，因此图片必须位于锚标签内。 希望对您有所帮助。 还是您要使用javascript？

如果要分开：

<div class="col-md-4">
    <a href="anywhere">
     <img src="images/prayer.jpg" />
    </a>
    <a class="pray" href="a.com">Submit your prayer request</a>
 </div>

Answer 3

使含div位置绝对的，所以a标签可以含有的范围内被定位绝对div

就像是：

<div class="col-md-4" style='position:absolute;'>
    <img src="images/prayer.jpg" />
    <a class="pray" href="a.com" style="background:rgba(255,0,0,0.7);position:absolute;right:0px;bottom:0px;">Submit your prayer request</a>
</div>

Answer 4

我建议使用CSS属性“ position: absolute; ”。 适当的CSS设置可让您将href锚放置在所需的任何位置。

    <div class="col-md-4">
<img src="http://i.stack.imgur.com/Ye30T.png" />
<a class="pray" style="position: absolute;
left: 68px;
top: 156px;
display: block;
width: 262px;
height: 48px;
padding-top: 12px;
padding-left: 21px;" href="a.com"></a>
</div>

Answer 5

<style>
  img 
   {
   position: absolute;
   z-index: -1;
   }
</style>

<div class="col-md-4">
   <img src="images/prayer.jpg" />
   <a class="pray" href="a.com">Submit your prayer request</a>
</div>

Answer 6

我认为需要使用area tag ，单击此处以查看它在图像上的工作方式。

<div class="col-md-4">
    <img src="images/prayer.jpg" width="322" height="195" usemap="#prayermap" />
    <map name="prayermap">
        <area shape="rect" coords="60,150,322,195" alt="Submit prayer request" href="a.com">
    </map>
</div>

Answer 7

您可以通过将链接绝对定位在图像.col-md-4实现此目的（添加了更多CSS以使图像适合.col-md-4 ，大致可以转换为Bootstrap的功能）：

 .col-md-4 { position: relative; } .col-md-4 a { background: rgba(255, 0, 0, 0.3); bottom: 0; padding: 10px; position: absolute; right: 0; } .col-md-4 img { display: block; height: auto; width: 100%; } 

 <div class="col-md-4"> <img src="http://dummyimage.com/300x150/cccccc/fff" /> <a class="pray" href="a.com">Submit your prayer request</a> </div> 

JSFiddle