Question

自从我在这里发布以来已经有一段时间了！

在我的网站上，我最近有一个新的登录屏幕，屏幕只是一张没有代码的图片，我已经在上面放了透明的表格。我必须指定表单的位置以匹配图像。但是，我完全忘记了图像适合屏幕，所以当它从我的全屏看起来很好时，如果我调整它的大小，表单就不符合我想要它们的位置。您可以在我的网站上看到 - www.velrania.com。

那么有没有办法将表单保留在应该存在的特定位置，同时保持“适合屏幕”？我熟悉CSS和HTML，但会研究其他任何语言来完成这项工作。

以下是索引页面的代码，以备不时之需：

<style>
body {
background-image:  url(images/home.jpg);      
}

.username{
background-repeat:no-repeat;
width:265px;
height:27px;
border-color: transparent;
background-color: transparent; 
position: absolute;
left: 906px;
top: 325px;
}

.password{
background-repeat:no-repeat;
width:265px;
height:27px;
border-color: transparent;
background-color: transparent; 
position: absolute;
left: 906px;
top: 395px;
}

.register{
background-repeat:no-repeat;
width:420px;
height:40px;
background-color: transparent; 
left: 750px;
top: 585px;
cursor:pointer;
border:none;    
line-height: 100;
overflow: hidden;
position: absolute;
}

.save
{
background-repeat:no-repeat;
width:200px;
height:75px;
cursor:pointer;
background-color: transparent;
border:none;    
line-height: 100;
overflow: hidden;
position: absolute;
left: 860px;
top: 475px;
}
</style>
<body background="images/home.jpg">

<form action="login.php" method="post">
<input type="text" name="usermail" class="username"/><br /><br />
<input type="password" name="password" class="password"/><br /><br />
<input type="submit" class="save" /><input type="hidden" name="Login" />
</form>
<form action="register.php" method="post">
<input type="submit" class="register"/>

</form>
</body>

Answer 1

尝试这个

body {
  background-image:  url(images/home.jpg);
  margin: 0px;  
}

背景适合屏幕，表格不适合

1 个答案: