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

refrence image

Answer 1

如果您希望您的图片有一个href链接，那么当任何人点击您的图片时，应该将它们带到您想要的链接，就像文本链接一样，所以对您的代码进行一些小改动，

将标签包装在标签上，如下面。

rowSums

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

k-1

Answer 6

我认为需要使用area tag，点击here查看图片的工作方式。

<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

你可以通过将链接绝对放在图像上来实现这一点（添加了一些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