So fügen Sie Bilder mit CSS in die Eingabe ein

So fügen Sie Bilder mit CSS in die Eingabe ein: Legen Sie zuerst das untergeordnete Element im Div fest, das die Eingabe enthält. Setzen Sie dann die Positionierung des äußeren Divs auf „Absolut“. Eingang.

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

CSS-Bilder in die Eingabe einfügen

1. Stellen Sie das Unterelement

<div class="search">
    <span></span>
    <input type="text">
</div>

ein.

3 Spannen Sie die Positionierung auf „absolut“ und legen Sie die Breite, Höhe und das Hintergrundbild fest

.search{
    position: relative;
}

4. Fügen Sie der Eingabe das Attribut „margin-left“ hinzu.

.search > span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./search.png) no-repeat;
    background-size: 80% 80%;
    background-position: center;
}

5. Rendern

Das obige ist der detaillierte Inhalt vonSo fügen Sie Bilder mit CSS in die Eingabe ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!