gpt4 book ai didi

html - 无法仅显示背景图片的整个网页

转载 作者:行者123 更新时间:2023-11-28 06:53:57 25 4
gpt4 key购买 nike

做了什么:

已创建所需的 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 页并且正在显示背景图像“第 5 页”。因此,当用户从第 4 页导航到第 5 页时,用户是假设要查看第 5 页的内容,这只是背景图片。

问题

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

注意

我必须输入以下属性:

display:none

原因:我以 block 的形式创建了以下堆栈,因此个人 <div> block 只会在 <script> 时出现实现。因此,请不要建议我需要删除 display:none因为这样做会 导致合并,此外,它也什么都不做。

谢谢

最佳答案

首先,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/

附言使用浏览器的检查功能查看应用的css,你会发现错误在哪里

关于html - 无法仅显示背景图片的整个网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33622420/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com