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>

您可能想要使用选项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>

答

尝试使用HTML的图像映射。（特定的地图标记）

Bootstrap使图像的一部分可点击

相关推荐