Question

相当新的。目前，我的头版中的一个容器中有一个图像和一个按钮。我正试图将该按钮嵌入到该图像中。我应该

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

或者我还有其他方式可以遵循吗？我该如何实现呢？非常感谢！

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

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

Answer 2

尝试使用html的imagemap。（特定地图标签）

Bootstrap使图像的一部分可点击

2 个答案: