Wie fügt man ein Bild zu einem Anchor-Tag mit CSS hinzu?

Question

Ich möchte ein Bild mit dem Link auf der Menüleiste anzeigen. Mein Code ist wie folgt:

<a href="#" class="login" title="Login"></a> 

Die Login-Klasse in CSS ist wie folgt:

.login{background: url(../img/user.png) no-repeat 6px center;} 

Aber ich bin nicht in der Lage, das Bild im Browser anzuzeigen. Wenn ich versuchte

<a href="#" class="login" title="Login">Login</a> 

dann Bild erscheint im Hintergrund. Aber ich möchte nur Bild und nicht den Text verwenden. wie kann ich das machen?

Answer 1

Sie müssen die Abmessungen des Tags a festlegen und auf display: block; einstellen.

.login { 
    background: url(../img/user.png) no-repeat 6px center; 
    width: 100px; 
    height: 100px; 
    display: block; 
} 

Natürlich die Abmessungen durch die richtigen ersetzen.

Alternativ können Sie das Bild setzen direkt in den a Tag wie so:

<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>

Answer 2

Sie können die folgende:

<a href="#" class="login" title="Login"><img src="../img/user.png" /></a> 

EDIT: Ich vergaß zu erwähnen würden Sie bedeuten muss das Hintergrundbild von Ihrem CSS entfernen.

Answer 3

Verwenden Sie den folgenden Code ein:

<a href="#" class="navbar-brand" title="Home"><img src= {require('../img/image_namer.svg')} /></a>