Maison  >  Article  >  interface Web  >  Comment insérer des images dans l'entrée avec CSS

Comment insérer des images dans l'entrée avec CSS

藏色散人
藏色散人original
2021-01-11 09:44:198589parcourir

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.

Comment insérer des images dans l'entrée avec CSS

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

Comment insérer des images dans lentrée avec CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn