0

К блоку с шириной 100% (нужно именно 100%) вешаем background картинку дома (с позиционированием cover) и нужно внутри создать блок в котором будет ссылка и поставить его на окно этого дома. Соответственно отступ слева на всех мониторах будет разный и задать фиксированную величину не вариант, что делать?

P.S. нужно создать интерактивный дом, где при наведение на стену/окно/лестницу/дверь и прочее рядом будет выскакивать подсказка. Flash не катит.

6
  • image map не годится? вместо фона img с area
    – Sergey
    30 мая 2016 в 2:29
  • Но не совсем подошло, ибо требует денег за возможность масштабирования...
    – f1amestar
    2 июн 2016 в 18:17
  • Не понятно как это может требовать денег
    – Sergey
    3 июн 2016 в 0:41
  • Там во вкладке Zoom, для масштабирования ссылок просят подписку оформить за 5 баксов
    – f1amestar
    3 июн 2016 в 4:59
  • Это ещё что за хрень такая - масштабирование ссылок? html - Это же просто текстовый файл, что там масштабировать?
    – Sergey
    3 июн 2016 в 5:37

1 ответ 1

1

Для абсолютного позиционирования внутри блока, нужно задать position: relative родителю и position: absolute чилду.

background-position: center; обеспечит центрирование изображения, что позволит на разных разрешениях экрана от середины позиционировать ссылки

HTML

<div class='background'>
    <div class='link'><a href='#'>link</a></div>
</div>

CSS

.background {
    width: 100%;
    height: 300px;
    background: url('/img/background.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.link {
    position: absolute;
    left: 25%;
}
5
  • Я бы не стал делать cover для изображения, на котором точно в конкретном месте должна быть ссылка. Проще сделать блок с изображением и задать ему overflow: hidden
    – Doofy
    30 мая 2016 в 2:18
  • Не совсем понял второй вариант, ведь если просто сделать блок с overflow: hidden мы получим удобный вариант для absolute позиционирования ссылок, но потеряем адаптивность, ибо на телефоне отрежет часть картинки, на fullhd наоборот картинки не хватит.
    – f1amestar
    30 мая 2016 в 21:20
  • вариант выше не подошел, ссылку если тыкнуть то она не сильно меняет позицию при масштабировании, что в принципе приемлимо, а вот если объект побольше (например картинку с ссылкой), то ее начинает кидать в стороны при масштабировании.
    – f1amestar
    3 июн 2016 в 5:03
  • @f1amestar, предоставь код чтоли с картинкой, добавь в свой вопрос как должно быть
    – Doofy
    3 июн 2016 в 6:21
  • Уже решил проблему, отказался от cover да и от блока с шириной 100%. Сделал фиксированную ширину в px и забил. А так ради интереса перепробовал много чего и подошел только вариант с написание image map. Если интересно решение нашел в этом: github.com/davidjbradshaw/image-map-resizer
    – f1amestar
    5 июн 2016 в 22:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.