Проблема с изображением с href style

Question

Я пытаюсь создать href над изображением, как на изображении ниже. У меня нет точной идеи, как установить его. Я пробовал код вроде этого, но не работал. Отправьте свою молитву ссылка в красный color.My код:

<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

Это достигается путем размещения ссылки абсолютно на изображение (добавлено еще несколько 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

Answer 2

, если вы хотите, чтобы ваше изображение имеет HREF ссылку, чтобы когда-либо кто-то нажмите на изображении, которые должны принять их по ссылке вы хотите как ссылку на текст, так что сделайте sm все изменения в вашем коде,

просто заверните свой тег на бирке, как рев.

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

Answer 3

Вы должны добавить ярлык якоря («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 4

Сделать положение, содержащее 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 5

Я бы порекомендовал использовать свойство css "position: absolute;". Соответствующая настройка css позволяет разместить href anchor, когда захотите.

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

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

Я думаю, что нужно использовать 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>