Как добавить изображение в тег привязки с помощью CSS?

Я хочу показать изображение со ссылкой на строке меню. Мой код выглядит следующим образом:

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

Класс входа в css выглядит следующим образом:

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

Но я не могу просмотреть изображение в браузере. Если я пробовал как

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

затем изображение появляется в фоновом режиме. Но я хочу использовать только изображение, а не текст. как я могу это сделать?

Ответы

Ответ 1

Вам нужно установить размеры тега a и установить его на display: block;.

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

Конечно, замените размеры правильными.

В качестве альтернативы вы можете поместить изображение непосредственно в тег a так:

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

Ответ 2

Вы можете использовать следующее:

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

EDIT: Я забыл упомянуть об этом, это означает, что вам нужно удалить фоновое изображение из вашего CSS.