Bootstrap 模态图像背景答案

【问题标题】：Bootstrap Modal Image BackgroundBootstrap 模态图像背景
【发布时间】：2015-08-15 00:22:37
【问题描述】：

只是想问一下我的模态中是否可以有背景图片？我尝试过搜索，但我只在模态上看到与页面本身相关的背景相关内容。我想要的是我的模态框有一个图像背景。或者改变它的颜色？谢谢。我在 CSS 方面不是那么好。谢谢。

【问题讨论】：

stackoverflow.com/questions/18310324/… 也许这个链接会对你有所帮助。

标签： css twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

是的，只需使用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">&times;</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>

【讨论】：

【解决方案2】：

假设你想在你的模态体中使用一个图像，你可以使用

.modal-body {
   background-image: url(path/to/image);
}

或者如果你想在你的模态后面使用它，你可以使用

.modal-backdrop {
   background-image: url(path/to/image);
}

【讨论】：

Modal body 仅将图像作为背景放在 body 上（如果您愿意，可以放在 modal 的中间）。背景涵盖了模态弹出窗口背后的内容。有没有办法用图像替换整个模态背景（使得页眉/页脚也在该单个图像下）？

【解决方案3】：

我假设您使用的是来自

的引导程序

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

你需要编辑你的

<div class="modal-content">
    ...
</div>

到：

<div class="modal-content modal-popout-bg">

css:

.modal .modal-popout-bg {
    background-image: url("http://somepic.com/somepic.jpg");
}

【讨论】：

【解决方案4】：

我通过下面的代码得到了所需的结果，可能对某人有帮助：

仅在正文中显示合适的图像：

.modal-body {
  background-size: cover;
  background-image: url("./bg_image.png");
}

用于在 Complete Modal 中显示合适的图像（包括页眉和页脚）：

.modal-content {
  background-size: cover;
  background-image: url("./bg_image.png");
}

编辑：我使用的模态是直接从here复制的标准模态

【讨论】：