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 1}}标签确实:)

无法将背景图像添加到bootstrap Modal

1 个答案: