Как сделать картинку ссылкой в html два простых способа.

Как сделать картинку ссылкой в html

В веб можно условно разделить ссылки на два типа, это текстовые и графические. В этой статье мы разберем как сделать картинку ссылкой в html с помощью обычного изображения, а так же в том случае если картинка в элементе будет в качестве фона.

Как сделать картинку ссылкой в html

Обычно картинка отображается с помощью тега img, что бы вставить картинку нужно добавить следующий код:



Тег img только отображает изображение, он не может ссылаться ни на что. Что бы сделать его ссылкой нам необходимо обернуть тег img тегом a. Ссылка вставляется следующим образом:

Теперь сложите это все и вы получите следующее:

Фоновая картинка как ссылка в html

 изображение как ссылка html

Есть ситуации когда картинка вставляется на страницу не с помощью html тега img, а с помощью css свойства background или background-image. Пользователь визуально может и не отличить как именно была добавлена картинка, но браузер увидит разницу. В таком случае мы тоже можем сделать изображение ссылкой. Давайте рассмотрим пример как это сделать.

Для начала нужно добавить на страницу div в див добавить элемент a, этим тегам добавим классы для более удобной стилизации.

Далее добавляем фоновое изображение, в css пишем классу .box-image привила:

Картинку мы вставили с помощью background-image, а position: relative; добавили что бы ссылку растянуть на всю ширину и высоту блока.

Таким способом мы имитировали типичное поведение ссылки в которой есть изображение. Если у вас остались вопросы как сделать картинку ссылкой, после наших примеров, вы можете задать их в комментариях.

comments powered by HyperComments