CSS背景和表单定位缩放

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

来源

2012-11-24 user1849188

为什么使用隐形输入和表单将用户发送到页面？使用绝对定位的''元素有什么问题？不要打破后退按钮！ – Dai

对不起，你的意思是？（我是非常自我教导:(）。你的意思是为每个按钮作一个图像作为链接？ – user1849188

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

此外，你应该将你的内联CSS的提交按钮到您的风格阻止：

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

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

来源

2012-11-24 09:36:30

谢谢你的帮助。我将尝试使用一些jpgs而不是形式并使用进行相对定位在样式表:)。祝我好运哈！ – user1849188

CSS背景和表单定位缩放

回答

相关问题