Maison > Article > interface Web > Comment insérer des images dans l'entrée avec CSS
Comment insérer des images dans une entrée en utilisant CSS : définissez d'abord l'élément enfant dans le div contenant l'entrée ; puis définissez le positionnement du div externe sur relatif, puis définissez le positionnement de l'étendue sur absolu ; Attribut margin-left à l’entrée C’est tout.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Recommandé : Tutoriel vidéo CSS
Css insérer une image dans l'entrée
Défini dans le div contenant l'élément enfant d'entrée.
<div class="search"> <span></span> <input type="text"> </div>
2. Définissez le positionnement du div externe sur relatif
.search{ position: relative; }
3. Définissez le positionnement de l'étendue sur absolu et définissez la largeur, la hauteur et l'image d'arrière-plan
..search > span{ position: absolute; display: inline-block; width: 20px; height: 20px; background: url(./search.png) no-repeat; background-size: 80% 80%; background-position: center; }
4. Ajoutez l'attribut margin-left à l'entrée.
.search > input{ width: 100%; padding-left: 20px; }
5. Rendu
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!