How to overlay/embed bootstrap button on image?

流过昼夜 提交于 2021-02-15 11:26:02

问题


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


回答1:


Stano answered the question for me!

"...yes the button can be positioned above the image tag, for example like this: 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;
}


来源:https://stackoverflow.com/questions/16615222/how-to-overlay-embed-bootstrap-button-on-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!