web-dev-qa-db-fra.com

Comment ajouter une image à une balise d'ancrage en utilisant CSS?

Je veux montrer une image avec le lien sur la barre de menu. Mon code est comme ci-dessous:

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

La classe de connexion en css est la suivante:

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

Mais, je ne peux pas voir l'image dans le navigateur. Si j'ai essayé comme

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

alors l'image apparaît en arrière-plan. Mais je veux utiliser uniquement l'image et pas le texte. Comment puis je faire ça?

htmlcss
25
Bhushan Firake

Vous devrez définir les dimensions sur la balise a et la définir sur display: block;.

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

Bien sûr, remplacez les dimensions par les bonnes.

Vous pouvez également placer l'image directement dans la balise a comme suit:

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

27
Jan Hančič

Vous pouvez utiliser les éléments suivants:

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

EDIT: J'ai oublié de mentionner que cela signifierait que vous devez supprimer l'image de fond de votre CSS.

7
neilvillareal