Question

已完成的工作：

已创建所需的Html标记，如下面的代码所示：

<html>

<head>
    ....
     ....
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-1.3.2.min.js"></script>  
    <style style="text/css">
         html, body {
             padding: 0;
             margin: 0;
             position:relative;
             width: auto;
             height: auto;
        } 
        .container {
            width: 150px;
            align-content: center;
            margin-top: 980px;
            clear: both;
        }
        .container input {
            width: 82%;
            clear: both;
        }

    </style>
</head>

<body>
     ...
      ...
    <div id="page4" align= "center" style=" background-image: url(Image/Page2.png); position: relative; z-index: 2; display:none" width="100%" height="100%" left="0px" top="0px">

        <form style=" alignment-adjust: autofocus; padding: 30px" class="container" action="Page5" method="POST">
            Name: <input type="text" name="name" size="15px" required><br><br>
            Email: <input type="text" name="email" size="15px" required><br><br>
        </form>
        <input type="image" src="image/Submit.png" alt="Submit" width="100px" height="50px" onClick = "Page5()">
    </div>

    <script>
        function Page5() {
            $("#page4").hide();
            $("#page5").show();
        }
    </script>


    <div id="page5" align= "center" style=" background-image: url(Image/Page5.png);position: relative; z-index: 3; display:none" width="100%" height="100%" >
    </div>
</body>
</html>

功能性：

在用户提交第4页的表单后，用户应该能够查看第5页并显示背景图像“Page 5”。因此，当用户从第4页导航到第5页时，用户是假设看到第5页的内容，它只是背景图像。

问题

当用户从第4页导航到第5页时，不显示第5页的内容，则不显示整个背景图像。因此，我想寻求帮助， 1.）为什么会这样 2.）什么是最好的整改过程

注

我必须输入以下属性：

display:none

原因：我以块的形式创建了以下堆栈，因此单个<div>块仅在实现<script>时出现。因此，请不要建议我删除display:none这样做导致合并，而且它也没有做任何事情。

由于

Answer 1

首先，没有＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;属性为div，因此将宽度和高度声明移动到CSS。同时将高度100％添加到html和body，否则div无法计算高度

html, body {
             padding: 0;
             margin: 0;
             position:relative;
             width: 100%;
             height: 100%;
        } 
#page5{
    background-color: red;
    width: 100%;
    height:100%
}

http://jsfiddle.net/arrhyppz/

P.S。使用浏览器的检查功能查看应用的css，你会发现你的错误在哪里

无法显示仅包含背景图片的整个网页

1 个答案: