Html 如何在文本框后面“发回图像”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11488730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I 'send an image back', behind textboxes?
提问by George B?lan
You can view my problem:
你可以查看我的问题：
http://i.stack.imgur.com/cGoEU.png
http://i.stack.imgur.com/cGoEU.png
That image is covering my login form. How do I get it to move behind the textboxes & sign in button?
该图像覆盖了我的登录表单。如何让它移动到文本框后面并登录按钮？
This is my code:
这是我的代码：
<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" />
采纳答案by Daniel Li
Try:
尝试：
<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>
Enjoy and good luck!
享受并祝你好运！
回答by Borgtex
Try with style="z-index:-5;" and position relative or absolute
尝试使用 style="z-index:-5;" 和位置相对或绝对
回答by Battle_707
The easiest way to do this is through CSS' z-Index. Basically what it does it define the stacked location of elements. The higher the number, the more on top it is of other elements. Since you did not provide the top HTML for these input fields, I cannot give you a concrete example on how to do this, but I would be happy to help you further if you provide more code.
最简单的方法是通过 CSS 的 z-Index。基本上它的作用是定义元素的堆叠位置。数字越高，其他元素的顶部就越多。由于您没有为这些输入字段提供顶部 HTML，因此我无法提供具体的示例来说明如何执行此操作，但如果您提供更多代码，我将很乐意为您提供进一步帮助。
回答by Raab
wrap inputs in a div and and style it with the image in background.
将输入包装在 div 中，并使用背景中的图像对其进行样式设置。
回答by Jason Allen
I'm not sure how your orange rectangle fits into your HTML but elements can be placed in front or behind other elements using the z-indexstyle property which you can append to the style attribute.
我不确定您的橙色矩形如何适合您的 HTML，但可以使用z-index可以附加到 style 属性的 style 属性将元素放在其他元素的前面或后面。
More information on this can be found here: http://htmldog.com/reference/cssproperties/z-index/
可以在此处找到有关此的更多信息：http: //htmldog.com/reference/cssproperties/z-index/
回答by 32bitfloat
You need to set z-indexes in css.
您需要在 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" />
Keep in mind that for using z-index you'll need to specify the position as I did it, even if you want to use the default position.
请记住，要使用 z-index，您需要像我一样指定位置，即使您想使用默认位置。
回答by CB Du Rietz
If you're using a 'gradient box' as background, you should probably consider using CSS for a similar effect instead.
如果您使用“渐变框”作为背景，您可能应该考虑使用 CSS 来实现类似的效果。
