Question

我有一个包含django表单的叠加层，背景图片没有显示出来。我在背景中有一个轮廓图像，填充页面，理想情况下随页面大小移动。然后在它的中心顶部的一张桌子，其中包含我试图透明的形式。

我昨天盲目地摆弄了css，它已经消失了！

    {% extends 'prodman/basenew.html' %}
    {% load staticfiles %}
    {% block pagetitle %}Time and Expenses{% endblock %}

    {% block content %}

    <iframe name="hiddenFrame" class="hide"></iframe>
        <div id="overlay">
            <form id= "person-form" target='hiddenFrame' method = 'POST' action="" class="overlay-form" enctype="multipart/form-data">{% csrf_token %}
                <table id="add-person-form" class="overlay-table">
                <tr></br></br>{{ personform.first_name }}</tr>
                <tr></br></br>{{ personform.surname }}</tr>
                <tr></br></br>{{ personform.email }}</tr>
                <tr></br></br>{{ personform.position }}</tr>
                <tr></br></br>{{ personform.contract_type }}</tr>
                <tr></br></br>{{ personform.mentor }}</tr>
                <tr></br></br><font color="white">Assign as a coach?&nbsp;</font>{{ personform.make_person_coach }}</tr>
                </table>
                </br>
                <input type = "submit" id = "save" value = "Add person">
                </br>
                </br>
                <strong>Click here to [<a href='#' onclick='overlay()'>close</a>]</strong>
            </form>
        </div>

        <a href='#' class='class1' onclick='overlay()'>Add person</a>
<p>Some more html here....</p>
    {% endblock %}

在我的basenew.html中，我有

{% load staticfiles %}
<head>
<link rel='stylesheet' href="{% static 'tande/newtimesheets.css' %}" type='text/css' media='all'/>
</head>

...

这是我的样式表

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-image:url('{% static 'tande/images/silhouette.png' %}');
     background-repeat: no-repeat;
     background-size: 90%;
     background-position: center;
}
#overlay div {
     width:800px;
     margin: 100px auto;
     background: #cccccc;
     border: 1px solid #000;
     padding:15px;
     text-align:center;
}
form.overlay-form {
     width:800px;
     margin: 350px auto;
}
table.overlay-table tr td {
    background: rgb(54, 25, 25); 
    background: rgba(54, 25, 25, 0); 
    border-style: none;
    margin-right: 40%;
    margin-bottom: 30%;
    position: relative;
    text-align: center;
    width: 800px;
}
add-person {
    text-align: right;
    margin-right: 10px;
    width: 10px;
}
body {
     height:100%;
     margin:0;
     padding:0;
}

以防万一在这里有助于覆盖的触发方式：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

谢谢！

无法在叠加层上看到背景图片

0 个答案: