Bootstrap使圖像的一部分可點擊

這是相當新穎的。目前，我的頭版中有一個容器中有一個圖像和一個按鈕。我試圖將該按鈕嵌入到該圖像中。我應該Bootstrap使圖像的一部分可點擊

使該圖像的一部分可點擊，並讓它觸發一個函數？
或強制該按鈕浮動在該圖片的某個位置？

或者我還有另外一種方法嗎？以及我如何實現這一點？非常感謝！

<div class="col-md-10 col-lg-offset-1 text-center"> 
     <img src="../img/background.png" class="rounded" alt=""> 
     <button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above 
</div>

來源

2017-02-15 user4046073

您可能想要使用選項2，因爲它會容易得多。你可以通過相對定位來實現，但是你需要提供一個你想要輸出的圖像，以便我們提供精確的代碼來顯示如何去做。 –

您可能還會考慮圖像映射。有在線生成器，使他們很容易製作。 –

我也在該頁面上有一個輸入字段。這就是那個按鈕從中獲取值的位置。我仍然可以通過第二種方式實現這一目標？ – user4046073

您可以使用position: absolute使其浮在圖像上。看看這個

https://jsfiddle.net/5ueau24b/1/

#s 
 
{ 
 
    position: absolute; 
 
    margin-left: -200px; 
 
    margin-top: 130px; 
 
}

<div class="col-md-10 col-lg-offset-1 text-center"> 
 
     <img src="http://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" class="rounded" alt=""> 
 
     <button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above 
 
</div>

來源

2017-02-15 01:47:20

嘗試使用HTML的圖像映射。（特定的地圖標記）

來源

2017-02-15 01:59:12

Bootstrap使圖像的一部分可點擊

回答

相關問題