如何在文本框后面“发回图像”？

Question

您可以查看我的问题：

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" />

Answer 1

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

Answer 2

尝试使用style =“z-index：-5;”和相对或绝对的位置

Answer 3

将输入包装在div中，并将其与背景中的图像进行样式化。

Answer 4

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

有关这方面的更多信息，请访问： http://htmldog.com/reference/cssproperties/z-index/

Answer 5

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

<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，您需要像我一样指定位置，即使您想使用默认位置。

Answer 6

尝试：

<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>

享受并祝你好运！

Answer 7

如果你正在使用＆＃39;渐变框＆＃39;作为背景，你应该考虑使用CSS代替类似的效果。