如何在CSS中获得像这样的标题图像？

Question

我正在尝试这个样式是Bootstrap模态。但是，我并不完全正确。

这是我到目前为止的代码：

<div class="modal fade" id="crowdmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content" style="background: url('satinweave.png')"> 
     <div class="modal-body" style="background: url('picy-modal.png'); background-position: top; background-repeat: no-repeat;"> 

     <p> cool text... </p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-thumbs-up"></i> Got it!</button> 
     </div> 
    </div> 
    </div> 
</div> 

这里是图片链接：http://i.imgur.com/KP1I8LA.png

这将是巨大的，如果不知何故，能响应为好。

任何帮助或在正确的方向微调将是有益的！

Answer 1

使用background-size:contain来确保background-image将采取全宽 - 不多不少。

现在，您可以将padding-top添加到.modal-content，然后您可以继续使用。

演示

$('#myModal').modal('show');

.modal-content { 
 
    background:url(http://i.imgur.com/KP1I8LA.png) no-repeat; 
 
    background-size:contain; 
 
    padding-top:40%; 
 
} 
 

 
.modal-header,.modal-body { 
 
    border:0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <!--<button type="button" class="close" data-dismiss="modal">&times;</button>--> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </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>

http://jsbin.com/tefufu/edit?html,css,js,output

Answer 2

.modal-body{min-height:300px;width:100%;background-size:cover}

<div class="modal fade" id="crowdmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content" style="background: url('satinweave.png')"> 
 
     <div class="modal-body" style="background: url('http://i.imgur.com/KP1I8LA.png'); background-position: top; background-repeat: no-repeat;"> 
 

 
     <p> cool text... </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-thumbs-up"></i> Got it!</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

就试试这个代码。

Answer 3

可以使用常规的图像标签，而不是使用背景图像得到的结果你想

<div class="modal fade" id="crowdmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
    <img src="http://i.imgur.com/KP1I8LA.png" class="img-responsive" style="width:100%;"/> 
 
    <p> 
 
    cool text... 
 
    </p> 
 
     <div class="modal-body" style="background: url('http://i.imgur.com/KP1I8LA.png'); background-position: top; background-repeat: no-repeat;"> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-thumbs-up"></i> Got it!</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

的jsfiddle https://jsfiddle.net/kjarriho/dLw6o6hc/

Answer 4

图像可以充当响应上添加类 - img-responsive，例如：

<img src="some.png" class="img-responsive" alt="Responsive image"> 

http://plnkr.co/edit/f6M7Te2AclpznCzlpyjZ?p=preview

希望它有帮助。

Answer 5

这是你想要的究竟是什么：参见DEMO

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 

 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
     Image 
 
     </button> 
 

 
     <!-- Modal --> 
 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
      <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
      <img src="http://i.imgur.com/KP1I8LA.png" class="img-responsive" /> 
 
     
 
      <div class="modal-body"> 
 
      Some cool text 
 
      </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>