0

Здравствуйте, попробую объяснить кратко. Например, имеется блок div под названием bg. Он растянут на всю длину и ширину экрана и залит какой-нибудь картинкой(например, комната 1200х768). Допустим такие стили:

html, body{
  height:100%;
}
.bg{
  background: url("bg.jpg");
  background-size: cover;
  width:100%;
}

На фоновой картинке имеется стол. Создаю блок div, который я хочу разместить на столе фонововой картинки. Возможно ли это реализовать? Т.е. просто ее туда поставить не проблема, но вот при изменении разрешения экрана он слетает(и указывание % в виде единицы измерения тут не помогает, он все равно слетает, ведь картинка уменьшается). Пока не понимаю в какую сторону копать. В итоге мне нужно привязать блок div к определенному участку картинки любым способом.

0

1 ответ 1

2

Типа такого ? Наведите на подушку или на оба стула

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://www.interiordesignlovers.com/images/interior_designs/kidroom/05/4-dearkids_290410_04.jpg" usemap="#image-map">

<map name="image-map">
  <area target="" alt="подушка" title="подушка" href="" coords="695,372,669,376,665,389,679,397,712,401,747,396,754,381,730,369,721,370,707,369" shape="poly">
  <area target="" alt="стул" title="стул" href="" coords="731,497,689,503,677,508,689,557,702,577,691,604,678,633,704,651,736,652,769,648,747,582,765,557,771,529,773,512,762,507,752,504" shape="poly">
  <area target="" alt="второй стул" title="второй стул" href="" coords="803,494,833,489,866,492,890,496,890,512,878,550,870,564,893,623,846,627,804,614,817,584,827,563,810,538,799,509" shape="poly">
</map>

2
  • Отлично. То что нужно. Это открытие для меня. Осталось теперь сделать ее адаптивной. Еще минус этого способа то, что он не работает с фоном (только картинки).
    – Dinario
    14 дек 2016 в 7:20
  • я ссылку специально поставил , для удобства
    – user33274
    14 дек 2016 в 23:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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