Html 如何在图像上叠加/嵌入引导按钮?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16615222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:29:39  来源:igfitidea点击:

How to overlay/embed bootstrap button on image?

htmlcsstwitter-bootstrap

提问by fat fantasma

I have been searching the web but can't find the answer. Is it possible to overlay or embed a bootstrap button over/in an image? If so, how?

我一直在网上搜索,但找不到答案。是否可以在图像上/中叠加或嵌入引导按钮?如果是这样,如何?

I have a image that I want to overlay a bootstrap button over so it looks like it is embedded in the image. I would like the button to have a dynamic label on it(for ex. somebody's name).

我有一个图像,我想在上面覆盖一个引导按钮,所以它看起来像是嵌入在图像中。我希望按钮上有一个动态标签(例如某人的名字)。

回答by fat fantasma

Stano answered the question for me!

斯塔诺为我解答了这个问题!

"...yes the button can be positioned above the image tag, for example like this: http://jsfiddle.net/ubWuX"

“...是的,按钮可以放置在图像标签上方,例如这样:http: //jsfiddle.net/ubWuX

HTML:

HTML:

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

CSS:

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