Ссылка поверх картинки
учусь верстать с макета. там есть кнопка 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
Ссылка поверх картинки
Картинка-ссылка поверх картинки-фона
Поверх картинки-фона надо наложить картинку-ссылку. Через <a><img></a> не делается.
Позиционирование объекта поверх картинки и ссылка под ней
Доброй ночи. У меня вопрос по позиционированию поверх изображения. Есть у меня картинка, при.
Текст поверх картинки
Весь форум перерыла, похожих тем полно, но ничего не получается. как сделать так, чтобы.
Текст поверх картинки
есть картинки в виде кнопок, которые являются ссылками, как вписать в них текст типа "Главная".
Как сделать ссылку по верх картинки?
Нужно по верх картинки добавить еще несколько ссылок, как . Заголовок добавляется нормально, но как /a>только добавляю ссылку — картинка увеличивается в размерах. Не могу понять в чем причина. Хелп!
P.S. Картинки обернуты в ссылки для работы плагина просмотра картинок.
- Вопрос задан более трёх лет назад
- 1031 просмотр
1 комментарий
Простой 1 комментарий
код в студию
Решения вопроса 1
Slava @slava_pv Автор вопроса
Засунул каждую ссылку в отдельный див и то что должно всплывать при наведении положил еще в один див рядом с этой ссылкой и задал диву (соседнему с ссылкой) position: absolute
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 2
Павел Радьков @paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Ссылка внутри ссылки — невалидный код. Браузер пытается его исправить разметки самостоятельно и ломает внешний вид.
Нужно положить дополнительные ссылки рядом, сестринскими элементами внутри общего родительского элемента. При наведении на этого родителя, позиционировать дополнительные ссылки поверх основной ссылки с картинкой.
Ответ написан более трёх лет назад
Slava @slava_pv Автор вопроса
Скажите, пожалуйста, возможно есть схожий пример. На словах пока не могу понять как сделать. Спасибо!
А тег map в этом не подойдет ?
Ответ написан более трёх лет назад
Slava @slava_pv Автор вопроса
Я так понимаю map для карт используется.
Slava, map режет картинку на области которые являются ссылками, насколько я помню к ним также можно добавлять css свойства отдельно https://www.w3schools.com/tags/tag_map.asp
Slava @slava_pv Автор вопроса
Алексей, может и можно таким путем пойти, но мне важно чтобы каждая картинка была обернута в тег «а» (для работы плагина) и при наведении всплывало окно с ссылками.
Slava, ну а просто отдельный див с абсолютным позиционированием поверх картинки не сканает ? Чтобы при hover на картинку он показывался
Slava @slava_pv Автор вопроса
Алексей, пробовал разные варианты, не выходит. Возможно что-то не так делаю, поэтому и написал но форум))
Текст поверх картинки на CSS
Самый простой способ добавления текста на картинку, также вместо текста можно добавить другую картинку.
Любой текст
Абсолютно любой.
.image < position: relative; width: 100%; /* для IE 6 */ >h2 < position: absolute; top: 250px; left: 0; width: 100%; >h2 span
« Предыдущая статья
Следующая статья »
Оставить комментарий
Последние статьи
- Webpack 5: создание базовой конфигурации
- Как сделать запись звука или голоса с микрофона
- Задания по React для прокачки
- Задания по JS для прокачки
- PrettyTags — дружелюбные теги в MODX
- Новый инструмент и компонент для MODX
- Типизация компонентов React с TypeScript
- Получение данных с сервера React Hooks
- Проверка ОГРН и ОГРНИП на TypeScript
- Проверка ИНН на TypeScript
Полезные инструменты
- Узнать ip адрес по домену сайта
- Генератор robots.txt
- Онлайн калькулятор XOR
- Компрессор HTML
- Перевод текста в верхний регистр
- Генератор Iframe
- Перевод текста в транслит
- Перевод текста в нижний регистр
© Copyright 2014-2023 Daruse
Все права защищены
Контакты автора
Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.
E-mail: daruse93@gmail.com
Telegram: daruse93