【发布时间】：2021-12-22 02:44:11
【问题描述】：
我的应用中目前有一个如下所示的表单：
但是我想在表单后面添加一个白色面板，面板仍然必须显示其背后的背景
当我使用<div class="panel panel-default" style="color: white "> 时，它不会添加这个
有谁知道我如何用 HTML / CSS 添加它
请查看以下代码以获得帮助：
{% extends "main/base.html"%}
{% block content %}
<div class="opacity-50">
<body id="bg" style="background-size: cover; background-repeat: no-repeat;background-image: url('https://images.unsplash.com/photo-1518334792104-db78a16ac8b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')";>
</body>
</div>
<div class="panel panel-default" style="color: white ">
<from>
<div style="text-align: center">
<h1>Sign Up with Shiftly</h1>
<p>Please complete the form below carefully, ensure you provide the correct information and documents to avoid your application being delayed.</p>
</div>
<h2 style="text-align: left; padding-left: 250px">PERSONAL INFORMATION</h2>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-2"> Title {{ form.title }}</div>
<div class="col-6 col-sm-3"> Initials {{ form.initials }} </div>
<div class="col-6 col-sm-3"> First Name(s) {{ form.firstname }} </div>
<div class="col-6 col-sm-3"> Surname {{ form.surname }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-3"> Preferred Name {{ form.prefferedname }}</div>
<div class="col-6 col-sm-2"> Gender {{ form.gender }} </div>
<div class="col-6 col-sm-3"> Date Of Birth{{ form.dob }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Country Of Birth{{ form.country }}</div>
<div class="col-6 col-sm-5"> Nationality {{ form.nationality }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> ID Number{{ form.idnumber }}</div>
<div class="col-6 col-sm-5"> Tax number{{ form.taxnumber }} </div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">CONTACT DETAILS</h2>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> E-mail {{ form.email }}</div>
<div class="col-6 col-sm-5"> Cell No{{ form.cellno }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Address Line 1 {{ form.address1 }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Address Line 2 {{ form.address2 }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> City {{ form.city }}</div>
<div class="col-6 col-sm-5"> Postal Code {{ form.postalcode }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Province {{ form.province }}</div>
<div class="col-6 col-sm-5"> Country {{ form.addcountry }}</div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">EMPLOYER INFORMATION</h2>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Employer Name {{ form.employername }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Employer Industry {{ form.employerindustry }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Occupation {{ form.occupation }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Designation {{ form.designation }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Income {{ form.income }} </div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">FUNDING ACCOUNT</h2>
<p style="text-align: left; padding-left: 250">Please provide your bank details of the account from which you’ll be funding your trading account. Your funds will be returned to this account after each trade. Note that we’ll assign the branch code automatically.</p>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Bank Name {{ form.bankname }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Account Number {{ form.accountno }}</div>
<div class="col-6 col-sm-5"> Account Type {{ form.accounttype }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Account Number {{ form.accountno }}</div>
<div class="col-6 col-sm-5"> Account Type {{ form.accounttype }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-5"> Trade Size {{ form.tradesize }}</div>
<div class="col-6 col-sm-5"> Anticipated Volume {{ form.anticipatedvolume }}</div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.returntoFX }} Please return my funds to the FX bank account (that will be opened for me) after each trade instead of the funding account above.</div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">IDENTITY DOCUMENT</h2>
<p style="text-align: left; padding-left: 250">We require a high-resolution colour photo (JPG format) of your ID document. Ensure that the entire document is visible (i.e no corners are cut off). Please select the identity document you'll be uploading:</p>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.idtype }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.identitydoc }} </div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">SELFIE WITH ID</h2>
<p style="text-align: left; padding-left: 250">We require a high-resolution colour photo (JPG format) of yourself holding the ID document you provided above. Ensure that your face is visible and that the text on the ID is legible. A tip is to hold the ID below your chin, or in line with your face, and ask someone else to take the photo of you.
</p>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.idslefie }} </div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">PROOF OF ADDRESS</h2>
<p style="text-align: left; padding-left: 250">We require a document (PDF format) confirming your physical address you provided above. Ensure that the document contains your name and is within its validity period. Please select the proof of address you'll be uploading:</p>
<br>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.poatype }} </div>
</div>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.poa }} </div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">SOURCE OF FUNDS</h2>
<p style="text-align: left; padding-left: 250">We require source of funds documents (PDF format) demonstrating that you have sufficient trading capital available in your cheque account (equal to your trade size above):</p>
<br>
<p style="text-align: Left; padding-left: 255px"> Cheque Account</p>
<div style="text-align: Left; padding-left: 255px">
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.fundsimg }} </div>
</div>
<div style="line-height: 60%;">
<p> • 3 months cheque account statements (most recent)</p>
<p> • Transaction history if trading capital was transferred to cheque account after most recent statement was issued</p>
</div>
<br>
<p >In addition, please select the source(s) of funds from where your trading capital originates and upload the documents (PDF format) for each:</p>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.sofunds }} </div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">REFERRAL</h2>
<br>
<div style="text-align: Left; padding-left: 255px">
<div style="line-height: 40%;">
<p>Referred By:</p>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.referral }} </div>
</div>
</div>
</div>
<br>
<h2 style="text-align: left; padding-left: 250">TERMS & CONDITIONS</h2>
<br>
<div style="text-align: Left; padding-left: 255px">
<div style="line-height: 40%;">
<p>Terms & Conditions</p>
<div class="row mb-2" style="width: 100%">
<div class="col-6 col-sm-10"> {{ form.terms }} I acknowledge that I have read and accept the <a href="#">Terms and Conditions</a> </div>
</div>
</div>
</div>
<br>
<div style="text-align: center; padding-left: 255px">
<input type="submit" class="btn-primary">
</div>
<br>
<br>
</from>
</div>
{% endblock %}
【问题讨论】：