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

Ссылка поверх картинки

учусь верстать с макета. там есть кнопка login овальная. решил просто фон кнопки сохранить как изображение и поверх него поставить ссылку в середине, что только не пробовал. в итоге пришлось по пикселям отступать сверху и слева так, чтобы ссылка была в середине картинки(фона кнопки login).

.header_login < margin-top: 21px; margin-left: 100px; width: 100px; height: 40px; background-repeat: no-repeat; background-size: contain; float: left; >.header_login a

вообще бред какой-то. Есть ли иной способ сделать так чтобы ссылка была поверх картинки?

Отслеживать

задан 9 июл 2020 в 17:35

Как сделать несколько ссылок на одной картинке | HTML

С помощью position: absolute; можно наложить ссылку поверх рисунка. Форма ссылки ограничена возможностями свойств border-radius и transform .

 #raz < position: relative; display: inline-block; >#raz a < position: absolute; border: 1px solid rgba(255,255,255,.5); >#raz a:nth-of-type(1) < left: 10%; top: 17%; width: 22%; height: 20%; >#raz a:nth-of-type(2) < left: 37%; top: 26%; width: 22%; height: 20%; border-radius: 100px / 20px 20px 60px 60px; transform: rotate(-12deg); >#raz a:nth-of-type(3) < left: 58%; top: 18%; width: 25%; height: 18%; border-radius: 100%; >#raz a:hover

Создание карты изображения в HTML

Когда требуются сложные фигуры, то можно использовать ссылку area [w3.org]. Чтобы связать её с изображением, в атрибуте usemap тега img следует прописать name тега map , который является её (ссылки) контейнером. К сожалению, area нельзя задать стили CSS.

для прямоугольника: координаты двух противоположных углов

медвежата у реки usemap=»#bears»> name=»bears»>

SVG для резинового IMG

SVG [mozilla.org] — это отдельная очень большая история. Из минусов: не такая повсеместная поддержка браузерами, как у map . points для polygon можно определить тем же инструментом или вытянуть координаты из Фотошопа, предварительно воспользовавшись «Быстрым выделением» (горячая клавиша W ).

дополнительная обёртка с указанием пропорций); --> /* для резинового изображения, которое изменяется согласно пропорциям, указанным в viewBox */ max-width: 100%; background: url(http://img-fotki.yandex.ru/get/4414/63641203.16/0_6c04a_2e684832_M); background-size: 100%; > polygon < fill: rgba(0,0,0,0); /* фон */ stroke: rgba(255,255,255,.5); /* цвет границы */ stroke-width: 1; /* толщина границы */ > polygon:hover

Помогите с html! Наложить текстовую ссылку поверх картинки.

Есть картинка с изображенным текстом в формате gif. В конце «текста» есть место под ссылку.
Какие теги и где нужно прописать, чтобы на это место сверху наложить текстовую гиперссылку, не меняя при этом расположения самой картинки?

Дополнен 10 лет назад

Я не силен в этой теме и не знаю что такое css( Мне нужно чтобы конкретно написали, а мне осталось скопипастить и выставить необходимые координаты.

Дополнен 10 лет назад

Лучший ответ

Засунь ссылку в DIV и поставь ей position в CSS куда нужно

Как поверх картинки сделать надпись

Текст тоже должен находиться внутри какого-нибудь тега. Я поместил надпись в тег .

Возможно, у Вас уже есть конструкция с тегом . Например, такая:

  Надпись

Тогда никакие дополнительные теги Вам не нужны, будете работать с Вашим кодом.

Итак, чтобы текст переместился над изображение, нужно воспользоваться CSS. Для тега-обертки нужно задать какое-то позиционирование, а для надписи обязательно абсолютное позиционирование (position: absolute).

Если Вы не знаете CSS, то код можно писать прямо в HTML. Вот пример:

  Надпись

Ну, а далее, нужно просто переместить текст в необходимое место над картинкой.

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