Bootstrap 使部分图像可点击答案

【问题标题】：Bootstrap make part of the image clickableBootstrap 使部分图像可点击
【发布时间】：2017-02-15 09:59:12
【问题描述】：

对此相当陌生。目前，我在首页的一个容器中有一个图像和一个按钮。我正在尝试将该按钮嵌入到该图像中。我应该

使该图像的一部分可点击，并让它触发一个功能？
或强制该按钮浮动在该图片的某个位置？

或者还有其他我应该遵循的方法吗？我该如何实现呢？非常感谢！

<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，因为它会容易得多。您可以通过相对定位来实现这一点，但您需要提供您希望输出的样子的图像，以便我们提供准确的代码来展示如何做到这一点。
您也可以考虑使用图像映射。有一些在线生成器可以让它们非常容易制作。
我在那个页面上也有一个输入字段。这就是那个按钮从中获取值的地方。我仍然可以使用第二种选择来实现这一点？
既然图片是背景图片，为什么不把img标签一起去掉，把div变成background-image呢？这样您就可以选择在按钮和/或 div 上使用非绝对定位方法，例如填充和边距

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

尝试使用 html 的 imagemap。（具体地图标签）

【讨论】：