CSS Bootstrap 模态图像背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30575245/
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
Bootstrap Modal Image Background
提问by Hymanhammer013
Just want to ask if it is possible to have a background image in my modal? I've tried searching but I only see background related things on modal which refers to the page itself. What I want is my modal box to have an image background on it. Or change it color? Thanks. I'm not that good in CSS. Thanks.
只是想问一下我的模态中是否可以有背景图片？我试过搜索，但我只在模态上看到与背景相关的东西，它指的是页面本身。我想要的是我的模态框上有一个图像背景。或者改变颜色？谢谢。我在 CSS 方面不是很好。谢谢。
回答by blairmeister
Assuming you want an image in your modals body you can use
假设你想在你的模态正文中使用一个图像
.modal-body {
background-image: url(path/to/image);
}
Or if you want it behind your modal you can use
或者，如果您想将其放在模态后面，则可以使用
.modal-backdrop {
background-image: url(path/to/image);
}
回答by Hashashihn Altheim
I assume you are using the bootstrap from
我假设您正在使用引导程序
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
You will need to edit your
您将需要编辑您的
<div class="modal-content">
...
</div>
to:
到：
<div class="modal-content modal-popout-bg">
css:
css：
.modal .modal-popout-bg {
background-image: url("http://somepic.com/somepic.jpg");
}
回答by odedta
Yes, just use background-image: url(path/to/your/image);
是的，只需使用 background-image: url(path/to/your/image);
$('#myModal').modal() .modal-body {
background-image: url('http://myfunnymemes.com/wp-content/uploads/2015/04/Doge-Meme-Lion-In-All-Its-Majestic-Glory.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>