在bootstrap模態的背景圖像
[英]Background image in bootstrap modal
問題描述
當用戶訪問我的網站時，我正在使用bootstrap模式。 我想在模態中使用背景圖像，以使其看起來很好。 我嘗試了很多，但我無法在我的bootstrap模式中設置背景圖像。 所以任何人都可以幫助我。
我的css-
.modal-dialog{
background-image: url("static/markatix/imgs/modal/bg.png");
}
我的模態代碼是 -
<div class="modal-content" >
<div style="padding:5px 5px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="padding:4px 50px;">
<p id="new_notification1" >Hello User</p>
<p id="new_notification2">How are you?</p>
<form name="form" method="post" action="{% url "visitors" %}">
{% csrf_token %}
<p align='left'><label for="id_phone_number">Phone number:</label><br> <input id="id_phone_number" name="phone_number" type="text" pattern="[0-9]{10}" required/></p>
<input type="hidden" name="shop_id" value={{shop.id}}/>
<button class="btn2modal" type="submit">Login with Facebook</button>
</form>
</div>
<div >
<div class="modal-body" style="padding:4px 50px;">
</div>
</div>
</div>
3 個解決方案
解決方案1
1 已采納 2016-12-12 07:12:11
試試這個，使用背景圖像到.modal-content類
.modal-content { background:url('https://cdn.techinasia.com/wp-content/uploads/2011/09/Doodle4Google-2010-Group-1-Winner.jpg'); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </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"> <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"> ... </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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
解決方案2
0 2016-12-12 07:12:35
在您的代碼中， modal-dialog類不存在。
嘗試將圖像應用於modal-boy
.modal-dialog{
background-image: url("http://imgh.us/boardroom_1.jpg");
}
解決方案3
0 2016-12-12 07:15:14
用這個
.modal-body{ background-image: url("http://www.w3schools.com/css/trolltunga.jpg"); }
<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </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> </div> </div> </div> </div> </div> </body>
動態背景圖像不顯示在引導模式上
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.