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

【问题标题】：How do I 'send an image back', behind textboxes?如何在文本框后面“发回图像”？
【发布时间】：2012-07-17 06:39:43
【问题描述】：

你可以查看我的问题：

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

【问题讨论】：

你想对图像做什么？
天啊，我想知道是否有人会在form 或其他包含元素上提及background-image？没关系，img 没有正确包含在源代码中（在 SO 的标记中）。

标签： html css image button textbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

最简单的方法是在表单上使用background-image 并忘记img 元素。
嗯...我会说完全忘记图像并在 CSS/JS 中完成它，但是我想这个问题还不够完整，我无法判断它。
Javascript？你只需要CSS。请参阅：cssplay.co.uk/boxes/css3-background.html（当然，background-size 在 IE8 或更低版本中不支持，因此如果确实需要 width，则需要考虑。）
哦，很抱歉给您带来了困惑。问题中的代码中有 JS（在关注时从字段中删除“用户名”/“密码”）。对于样式格式，它确实不是必需的。

【解决方案3】：

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

【讨论】：

我认为它周围也有一个 form，但至少这不是一个 cockamamie z-index 建议。

【解决方案4】：

试试：

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

祝你好运！

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

这不是正确的图像；那是提交按钮。 img 本身未正确包含在 SO 源标记中。
下一点是包含元素的位置也会影响它的去向；因此，如果它在 form 和 position: static 中，那么您将把 img 放置在 DOM 中它的父元素所在的位置。 body 可能会取代那个地方，而不是我假设的明显效果。简而言之，position: relative 应该应用于 positioning 父元素（form?div?fieldset?）。而且，你知道，将它与 background-image 放在包含元素而不是 img 元素上是“最好的”IMO。
当然。我们，可笑的 z-index-posters，首先假设放置一个输入，你不知道以后会发生什么，所以用背景图像替换它不是一个选择。感谢您提供更多信息，尽管可能有很多关于这个主题的其他假设。
这是 OP 要求的，是的（不难看出标记不正确）。我认为，如果根据错误的逻辑请求解决方案，以提供更好的解决方案。在大多数情况下，更多标记和positioning willy-nilly 不是最佳解决方案，但无论如何。我没有投反对票，但重要的是要注意父母positioning，大多数初学者不会选择这个。

【解决方案7】：

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

【讨论】：