5

你可以查看我的问题：

在此处输入图像描述

http://i.stack.imgur.com/cGoEU.png

该图像覆盖了我的登录表单。如何让它在文本框和登录按钮后面移动？

这是我的代码：

<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; top: 155px; left: 480px; width:auto; height:auto;">
<input type="text" class="tb7" value="Username" style="margin-left: 563px" 
    maxlength="20" onfocus="if(this.value == 'Username') {this.value='';}" />         
</br>
<input type="text" class="tb8"  value="Password" style="margin-left: 563px;"   
    maxlength="20" onfocus="if(this.value =='Password') {this.value='';}"/>
<input type="image" height="25px"   width="67px" style="vertical-align:top;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />
4

7 回答 7

8

尝试使用 style="z-index:-5;" 和位置相对或绝对

于 2012-07-15T01:44:34.207 回答
3

最简单的方法是通过 CSS 的 z-Index。基本上它的作用是定义元素的堆叠位置。数字越高，其他元素越多。由于您没有为这些输入字段提供顶级 HTML，因此我无法为您提供具体示例来说明如何执行此操作，但如果您提供更多代码，我很乐意为您提供进一步帮助。

于 2012-07-15T01:43:35.687 回答
2

将输入包装在 div 中，并使用背景中的图像对其进行样式设置。

于 2012-07-15T01:45:16.873 回答
1

我不确定您的橙色矩形如何适合您的 HTML，但可以使用z-index您可以附加到 style 属性的 style 属性将元素放置在其他元素的前面或后面。

更多信息可以在这里找到：http: //htmldog.com/reference/cssproperties/z-index/

于 2012-07-15T01:42:28.320 回答
1

您需要在 css 中设置 z-indexes。

<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; z-index: 50; top: 155px; left: 480px; width:auto; height:auto;">


<input type="text" class="tb7" value="Username" style="margin-left: 563px; z-index: 50;position: relative;" maxlength="20"
    onfocus="if(this.value == 'Username') {this.value='';}" />      
</br>

<input type="text" class="tb8"  value="Password" style="margin-left: 563px; z-index: 50;position: relative;"   maxlength="20"
    onfocus="if(this.value =='Password') {this.value='';}" />

<input type="image" height="25px"   width="67px" style="vertical-align:top; z-index: 50; position: relative;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />

请记住，对于使用 z-index，您需要像我一样指定位置，即使您想使用默认位置。

于 2012-07-15T01:44:52.500 回答
1

尝试：

<div id="form_wrapper" style="background-image:url('img/yellow.png');">
<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; top: 155px; left: 480px; width:auto; height:auto;">
<input type="text" class="tb7" value="Username" style="margin-left: 563px" 
    maxlength="20" onfocus="if(this.value == 'Username') {this.value='';}" />         
</br>
<input type="text" class="tb8"  value="Password" style="margin-left: 563px;"   
    maxlength="20" onfocus="if(this.value =='Password') {this.value='';}"/>
<input type="image" height="25px"   width="67px" style="vertical-align:top;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />
</div>

享受和好运！

于 2012-07-15T21:02:09.343 回答
0

如果您使用“渐变框”作为背景，您可能应该考虑使用 CSS 来获得类似的效果。

于 2012-07-16T22:39:43.823 回答