Question

早上好。

我是CSS的新手并且正在阅读一些主题，但在我尝试在BG图像上保留表单提交按钮时完全难倒。一旦我放大页面，按钮就会移出位置。

这是BG的CSS代码：

body
{ 
background-image:url('../pics/BGs/FrontBG.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background size: auto;
}
.bannerlogin1
{
position: relative;
top: 50;
left: 50;
}

.bannerlogin2
{
position: absolute;
top: 5px;
left: 400px;
}  

.bannerlogin3
{
position: absolute;
top: 5px;
left: 800px;
}

.bannerlogin4
{
position: absolute;
top: 5px;
left: 1250px;
}

来自我的欢迎页面的代码：

<BODY class="body" bgcolor="black">

<form action="../Nightlife.php">
<input class="bannerlogin1" type="submit" value="" style="width: 250px; height: 100px;    background-color:transparent; border:;" >
</form>

<form action="../Portrait.php">
<input class="bannerlogin2" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>


<form action="../Contact.php">
<input class="bannerlogin3" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>


<form action="../Client.php">
<input class="bannerlogin4" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>

感谢您的帮助:)。我有一种感觉，我可能会做一些从根本上愚蠢的事情，但已经从w3学校等读过一些东西，似乎无法找到解决这个问题的简明答案。

Answer 1

form需要有相对定位。否则，当您放大时，输入将定位到页面正文：

form{position:relative;}

此外，您应该将提交按钮的内联CSS移动到样式块：

input["submit"]{width: 250px; height: 100px; background-color:transparent;}

注意：[“submit”]是仅限CSS3的属性。

CSS背景和表单定位缩放

1 个答案: