css - 无法将背景图像添加到 Bootstrap 模态

Question

我想在模态的标题上添加背景图片，所以我想是否可以执行以下操作:

.modal-header{
background-image: url('../images/extended_top_provider.gif');
}

页眉会显示图像，但确实如此。相反，它执行以下操作:

我也尝试为不同的浏览器添加图标，但它也不显示图像。

任何帮助将不胜感激

更新

我可以添加图片，而不是正确的图片，图片路径有问题，但下面的图片没有正确对齐，我不知道为什么。

$(function(){
  $('##myModal').modal('show');
});

.client_logos {
    display: inline-block;
    width:100%;
    }

<div class="ie-only" style="overflow-y:hidden;">
        	<div class="modal fade in" id="myModal" aria-hidden="false">
            	<div class="modal-dialog modal-md custom-height-modal">
                	<div class="modal-content">
                    	<div class="modal-header" style="background: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');">
                        	<button type="button" class="close" data-dismiss="modal">x</button>
                            <h2 class="modal-header">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br />
                            <b>Use the links below to download a new browser or upgrade your existing browser.</b></p>                       
                        </div><!---Modal-Header Div--->
                        <div class="modal-body client_logos">
                        	<p>  <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Firefox-logo.svg/120px-Firefox-logo.svg.png" alt="image" />
                            	<img class="img-responsive" src="https://productforums.google.com/forum/image/GDF/15104268797498972201/8f39d8ec-5483-4e30-977d-817c8fd1c110" /> </p>
                        </div><!---Modal-Body Div--->
                        <div class="modal-footer">
                        	<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
                        </div><!---Modal-Footer Div--->
                    </div><!---Modal-Content Div--->
                </div><!---Custom Height Div--->
            </div><!---Modal Fade in Div--->
        </div><!---Start of Modal Div--->		 		
		<!--End of Modal container-->

Answer 1

这可能是因为一个非常简单的原因，background-image属性不占用任何宽度和高度，因此您可以将宽度和高度指定为 .modal-header像这样:

.modal-header{
    width:100px;
    height:100px;
    background-image: url('../images/extended_top_provider.gif');
}

试试这个，找出不同之处，如果你愿意，你可以简单地添加一个 <img>在你的 .modal-header 中标记但请注意 background-image不会停止页面呈现，而 img标签确实 :)