Comment puis-je "envoyer une image", derrière des zones de texte?

Vous pouvez consulter mon problème:

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

Que l'image couvre mon formulaire de connexion. Comment puis-je obtenir pour se déplacer derrière les zones de texte & bouton de connexion?

C'est mon 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" />

Qu'essayez-vous de faire avec l'image?
Gee, je me demande si quelqu'un va parler d'un background-image sur le form ou d'un autre contenant l'élément? Nevermind, le img n'était pas inclus dans le code source correctement (dans le cadre du balisage).

InformationsquelleAutor George Bălan | 2012-07-15

Essayer:

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

Profiter et bonne chance!

InformationsquelleAutor Daniel Li

4

Essayer avec style="z-index:-5;" et la position relative ou absolue

InformationsquelleAutor Borgtex
3

La façon la plus simple de le faire est par le biais de CSS z-Index. Essentiellement, ce qu'il ne définit pas la empilés emplacement des éléments. Plus le nombre est élevé, plus en haut, il est d'autres éléments. Puisque vous n'avez pas à fournir le haut HTML pour ces champs de saisie, je ne peux pas vous donner un exemple concret sur la façon de faire cela, mais je serais heureux de vous aider si vous nous donner plus de code.
- Manière la plus simple est background-image sur la forme et oublier le img élément.
- Eh bien...je dirais oublier l'image complètement et de le faire en CSS/ JS, mais alors la question n'était pas assez complet pour moi d'être assez d'un juge de cela, je suppose.
- Javascript? Vous avez seulement besoin de CSS. Voir: cssplay.co.uk/boxes/css3-background.html (bien sûr, background-size n'est pas pris en charge dans IE8 ou moins, de sorte que si le width est vraiment nécessaire, qui devra être pris en compte.)
- Owh, je suis désolé pour la confusion. Il y a JS dans le code en question (à supprimer "nom d'utilisateur" / "Mot de passe" dans les champs lorsqu'on est focalisé sur). Pour la mise en forme du style, il n'est en effet pas nécessaire.
InformationsquelleAutor Battle_707
2

envelopper entrées dans un div et des et style avec l'image en arrière-plan.
- Je suppose que il y a un form autour de trop, mais au moins ce n'est pas un cockamamie z-index suggestion.
InformationsquelleAutor Raab
1

Je ne suis pas sûr de savoir comment votre rectangle orange s'inscrit dans le HTML, mais certains éléments peuvent être placés devant ou derrière d'autres éléments à l'aide de la z-index propriété de style que vous pouvez ajouter à l'attribut style.

Plus d'informations sur ce qui peut être trouvé ici:
http://htmldog.com/reference/cssproperties/z-index/

InformationsquelleAutor Jason Allen
1

Vous devez définir le z-index dans le 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" />
```
Gardez à l'esprit que pour l'utilisation de z-index, vous aurez besoin de spécifier la position que j'ai fait, même si vous souhaitez utiliser la position par défaut.
- Ce n'est pas le droit à l'image; c'est le bouton soumettre. Le img lui-même n'était pas intégrées correctement dans la source de balisage.
- Le point suivant, c'est que l'élément contenant la position sera également influer sur l'endroit où il ira; par conséquent, si il est dans un form avec position: static, vous placez ensuite la img en position avec n'importe quel élément parent dans le DOM de position. body est probablement ce qui va prendre place, pas l'effet évident je suppose. En bref, position: relative doit être appliqué à la positioning élément parent (form? div? fieldset?). Et, tu sais, de le mettre avec background-image sur un élément contenant à la place d'un img élément est "meilleur" de l'OMI.
- Bien sûr. Nous, le ridicule z-index-affiches, commencé par l'hypothèse de la position de l'entrée, où vous ne savez pas ce qui doit arriver plus tard, afin de le remplacer par un backgroundimage n'était pas une option. Merci pour les autres infos, mais il peut être beaucoup d'autres de ce que-ifs sur ce sujet.
- C'est ce que l'OP a demandé, oui (et il n'était pas bien difficile de voir le balisage n'était pas à droite). Il est de mon avis que si une solution est demandé basées sur de fausses logique de proposer la meilleure solution. Plus de balisage et positioning bon gré mal gré est moins une solution optimale dans la plupart des cas, mais peu importe. Je n'ai pas downvoted tout, mais il est important de faire une remarque à propos de la mère positioning, la plupart des débutants ne seront pas de prendre cette place.
InformationsquelleAutor 32bitfloat
0

Si vous êtes en utilisant une "zone de dégradé" comme arrière-plan, vous devriez probablement envisager d'utiliser des CSS pour un effet similaire à la place.

InformationsquelleAutor CB Du Rietz

Vous devez vous connecter pour publier un commentaire.