Wie kann ich senden Sie ein Bild zurück", hinter Textfelder?

Können Sie anzeigen, mein problem:

Wie kann ich senden Sie ein Bild zurück

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

Das Bild ist für meine login-Formular. Wie bekomme ich es zu verschieben hinter die Textfelder & Anmelde-Schaltfläche?

Dies ist mein 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" />
Was versuchen Sie zu tun mit dem Bild?
Gee, ich Frage mich, wenn jemand ist zu erwähnen eine background-image auf die form oder andere element enthalten? Nevermind, die img war nicht in der Quelle enthalten code korrekt (innerhalb DAMIT ' s markup).

InformationsquelleAutor George Bălan | 2012-07-15

  1. 1

    Versuchen:

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

    Viel Spaß und viel Glück!

    InformationsquelleAutor Daniel Li

  2. 3

    Der einfachste Weg, dies zu tun ist durch CSS " z-Index. Im Grunde, was es tut, definieren die gestapelten Lage der Elemente. Je höher die Zahl, desto weiter oben wird es von anderen Elementen. Da hat man noch nicht die top-HTML-Code für diese input-Felder, ich kann Ihnen ein konkretes Beispiel auf, wie dies zu tun, aber ich würde gerne helfen Ihnen weiter, wenn Sie mehr code.

    Einfachste Weg ist background-image auf dem Formular und vergessen Sie die img element.
    Naja...ich würde sagen, vergessen Sie das Bild vollständig, und tun es in CSS/ JS, dann aber die Frage war nicht genug für mich genug für einen Richter ist es, nehme ich an.
    Javascript? Sie müssen nur CSS. Siehe: cssplay.co.uk/boxes/css3-background.html (natürlich background-size nicht unterstützt IE8 oder weniger, also wenn die width wirklich benötigt wird, müssten berücksichtigt werden.)
    Owh, ich bin sorry für die Verwirrung. Es gibt auch JS-code in die Frage (zum entfernen von 'Benutzername' und 'Kennwort' aus den Bereichen sich auf). Für die Formatierung ist es in der Tat nicht erforderlich.

    InformationsquelleAutor Battle_707

  3. 3

    Versuchen mit style="z-index:-5"; und position relative oder absolute

    InformationsquelleAutor Borgtex

  4. 2

    wrap-Eingänge in ein div-und style es mit dem Bild im hintergrund.

    Ich nehme an, es ist ein form um es zu, aber zumindest dies ist nicht eine verrückte z-index Vorschlag.

    InformationsquelleAutor Raab

  5. 1

    Ich bin mir nicht sicher, wie Sie Ihre orange Rechteck passt in Ihre HTML-aber Sie können Elemente platziert werden, die vor oder hinter andere Elemente mit der z-index Stil-Eigenschaft, die Sie anfügen können, um das style-Attribut.

    Mehr Informationen dazu können hier gefunden werden:
    http://htmldog.com/reference/cssproperties/z-index/

    Bitte verlinken Sie nicht auf W3Schools. Lesen Sie bitte hier: w3fools.com

    InformationsquelleAutor Jason Allen

  6. 1

    Müssen Sie die z-Indizes in css.

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

    Beachten Sie, dass für die Verwendung von z-index müssen Sie angeben, die position, wie ich es Tat, auch wenn Sie wollen, verwenden Sie die Standard-position.

    Das ist nicht das richtige Bild; das ist der submit-button. Die img selbst war nicht korrekt in der sogenannten Quelle-markup.
    Nächste Punkt ist, dass das enthaltende element, die position wird auch beeinflussen, wohin es gehen wird; daher, wenn es in einem form mit position: static Sie wird dann das img in position mit dem übergeordneten element, um es in der DOM-position. body ist wahrscheinlich was nehmen, dass nicht die offensichtliche Wirkung, nehme ich an. In kurzen, position: relative angewendet werden sollte, um die positioning übergeordneten element (form? div? fieldset?). Und, weißte, indem es mit background-image auf ein element enthalten, statt eine img element ist die "beste" IMO.
    Natürlich. Wir, die lächerlichen z-index-Poster, angefangen von der Annahme-position-Eingang, wo man nicht weiß, was passieren soll später, so ersetzt es mit einem Hintergrundbild war nicht eine option. Vielen Dank für die zusätzlichen infos, obwohl es viele andere was-wäre-wenn zu diesem Thema.
    Es ist, was die OP gefragt, ja (und es war nicht schwer zu sehen, das markup nicht richtig war). Es ist meine Meinung, dass, wenn eine Lösung angefordert wird, basierend auf einer fehlerhaften Logik zu bieten, die bessere Lösung. Mehr markup und positioning willy-nilly ist eine weniger optimale Lösung in den meisten Fällen, aber was solls. Ich habe nicht alle downvoted, aber es ist wichtig, beachten Sie über die Eltern positioning, die meisten Anfänger nicht das abholen.

    InformationsquelleAutor 32bitfloat

  7. 0

    Wenn Sie eine "gradient-box" als hintergrund, Sie sollten wahrscheinlich betrachten Sie die Verwendung von CSS für eine ähnliche Wirkung statt.

    InformationsquelleAutor CB Du Rietz

Schreibe einen Kommentar