如何在图像上覆盖/嵌入引导按钮？

【问题标题】：How to overlay/embed bootstrap button on image?如何在图像上覆盖/嵌入引导按钮？
【发布时间】：2021-04-19 08:23:13
【问题描述】：

我一直在网上搜索，但找不到答案。是否可以在图像上/在图像中覆盖或嵌入引导按钮？如果是这样，怎么做？

我有一个图像，我想在上面覆盖一个引导按钮，这样它看起来就像嵌入在图像中一样。我希望按钮上有一个动态标签（例如某人的名字）。

【问题讨论】：

你可能想看看w3schools.com/css/css_positioning.asp
谢谢斯塔诺。看起来应该可以了。
我仍在学习这个答案/批准问题的工作原理:) 大多数时候我说我必须等待 2 天然后我忘记了。再次感谢
很高兴它有帮助，是的，这是一个非常庞大和复杂的网站，可以发现，所以没关系;-)

标签： html css twitter-bootstrap

【解决方案1】：

Stano 为我回答了这个问题！

"...是的，按钮可以位于图像标签上方，例如：http://jsfiddle.net/ubWuX"

HTML：

<div id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
    <button class="button"> click here </button>
</div>

CSS：

#img_container {
    position:relative;
    display:inline-block;
    text-align:center;
    border:1px solid red;
}

.button {
    position:absolute;
    bottom:10px;
    right:10px;
    width:100px;
    height:30px;
}

【讨论】：