2

早上好。

我对 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 学校等读过一些东西，似乎无法找到一个简洁的答案来解决这个问题。

4

1 回答 1

0

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

form{position:relative;}

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

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

注意：["submit"] 是一个仅 CSS3 的属性。

于 2012-11-24T09:36:30.017 回答