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

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