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

enter image description here

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

来源

2012-07-15 George Bălan

你想用图像做什么？ – codingbiz 2012-07-15 01:43:44

哎，我想知道是否有人会在'form'或其他包含元素上提及'background-image'？没关系，'img'没有被正确包含在源代码中（在SO的标记中）。 – 2012-07-15 01:46:18

尝试：

<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-15 21:02:09

我不知道你的橙色长方形如何融入你的HTML，但元素可以放在前面或后面使用z-index样式属性，你可以添加其他元素样式属性。

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

来源

2012-07-15 01:42:28

请不要链接到W3Schools。请在这里阅读：http://w3fools.com/ – 2012-07-15 01:48:07

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

来源

2012-07-15 01:43:35

最简单的方法是在表单上的'background-image'并忘记'img'元素。 – 2012-07-15 01:53:44

好吧......我会说完全忘了图像，并在CSS/JS中完成，但是这个问题还不够完善，足以让我有足够的判断力。 – 2012-07-15 02:18:31

Javascript？是你只需要CSS。请参阅：http：//www.cssplay.co.uk/boxes/css3-background.html（当然，在IE8或更低版本中不支持'background-size'，所以如果真的需要'width'，那么需要考虑到。） – 2012-07-15 02:21:19

试着style =“z-index：-5;”和相对位置或绝对位置

来源

2012-07-15 01:44:34 Borgtex

您需要在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-15 01:44:52 32bitfloat

这不是正确的形象;这是提交按钮。 SOG源标记中没有正确包含'img'本身。 – 2012-07-15 01:49:59

接下来的一点是，包含元素的位置也会影响它的去向;因此，如果它的位置是'position：static'，那么你将把'img'放置在DOM中具有位置的位置上。 “身体”可能会占据那个位置，而不是我假设的明显效果。简而言之，'position：relative'应该应用于位置父元素（'form'？'div'？fieldset'？）。而且，你知道，将它放在包含元素而不是'img'元素上的'background-image'是最好的IMO。 – 2012-07-15 01:59:46

当然。我们这些荒谬的z-索引海报首先是假设定位一个输入，在这个输入中你不知道后面会发生什么，所以用一个背景图像替换它不是一个选项。感谢您提供更多信息，尽管此主题上可能有很多其他假设。 – 32bitfloat 2012-07-15 02:09:53

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

来源

2012-07-15 01:45:16 Rab

我假设它周围还有一个'form'，但至少这不是一个cockamamie'z-index'的建议。 – 2012-07-15 01:47:01

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

来源

2012-07-16 22:39:43

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

回答

相关问题