關於帶有href風格的圖像問題

我正在試圖在圖像上創建href，就像下面的圖片一樣。我沒有確切的想法如何設置它。我嘗試過這樣的代碼，但沒有工作。這裏提交您的祈禱將是紅色color.My代碼鏈接是：關於帶有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

來源

2015-10-28 Atif Khan

將上面的嘗試版本放到JSFiddle中，這樣會更容易或人們搞清楚你在做什麼錯誤https://jsfiddle.net/ –

您可以通過鏈接定位絕對在圖像上實現這一點（增加了一些CSS來裝進.col-md-4的形象，大致翻譯一下引導一樣）：

.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

來源

2015-10-29 10:07:10 maryisdead

如果你想你的形象有一個HREF鏈接，這樣當過有人在圖像上單擊應該帶他們到鏈接

你想像文本上的鏈接，所以要sm您的代碼中的所有更改，

只是將標籤包裹在標籤上，如波紋管。

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

來源

2015-10-28 10:33:40

謝謝，但我想要一個單獨的鏈接上的紅色color.not圖像上顯示爲href。 –

您必須在圖像之前添加錨（「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>

來源

2015-10-28 10:36:49

對不起，我想css .. –

@AtifKhan所以添加類。 –

使含有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>

來源

2015-10-28 10:42:44

'.col-md-4'很可能源於Bootstrap，並且將'position：absolute'應用於列會破壞佈局。另外，'position：relative'也有同樣的效果。 – maryisdead

我會推薦使用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>

來源

2015-10-28 10:48:28

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

來源

2015-10-28 10:50:12

我覺得需要用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>

來源

2015-10-29 08:59:00

這有點矯枉過正，不是嗎？也不能很好地使用響應式佈局。 – maryisdead

@maryisdead他想將圖像的紅色部分作爲鏈接，將鏈接添加到圖像上。我很確定你的答案不是他想要的。 –

這可能是。如果是這樣的話，那麼將圖像完整地呈現在渲染鏈接上將是一個非常糟糕的設計選擇，因爲這隻能通過CSS輕鬆實現。無論如何，我認爲圖像引用正是OP想要的樣子。 – maryisdead

關於帶有href風格的圖像問題

回答

相關問題