Позиционирование блока относительно фона

#javascript #html #css #css3 #svg

Есть нетривиальная задача.



html, body, .bg-cover {
  height: 100%;
  margin: 0;
}

.bg-cover {
  background-image: url(//i.stack.imgur.com/JkEWk.jpg);
  background-size: cover;
}

.element {
  position: absolute;
  background: red;
  background: rgba(255,0,0,.5);
  height: 10.416666666666668vw;
  width: 18.75vw;
  background-size: cover;
  z-index: 2;
  left: 29.947916666666668vw;
  top: 24vh;
}

  






Фоновое изображение:



Необходимо позиционировать element в белой области фона TV, таким образом, чтобы
не нарушалось взаимное расположение фона и блока element.

Проблема в том, что при разных разрешениях экрана фон масштабируется по разному. 
Может как-то можно получать позицию пикселя на фоне через js и относительно этого играть?

Сталкивался кто-нибудь с подобной проблемой?
    

Ответы

Ответ 1

Решение адаптивно,  работает во всех браузерах, включая Edge.    

Чтобы два блока с изображениями,- в вашем случае картинка комнаты и фон-изображение
на TV, согласованно меняли свои пропорции и не нарушалось при этом взаимное позиционирование,
необходимо разместить оба изображения внутри блока SVG   



 

  

  
   
  




Интересно сделать изображение на TV меняющееся  динамически. Идея понятна,- нужно
спрятать спрайт с изображениями под картинку спальни и прокручивать спрайт, чтобы сквозь
вырез экрана TV был виден спрайт.
Пробовал достаточно долго варианты с масками, с клипами, комбинированные способы,
но не получилось. Отверстие в экране TV образуется, но сквозь него спрайта не видно.     

Есть ли у кого идеи, как сделать это?

Update
Решение  динамической смены изображений - Имитация смены изображений на экране TV


Ответ 2

svg , конечно, сильная технология, но позиционирование элементов на svg холсте мало
отличается от абсолютного позиционирования в css. Для разнообразия предложу такой вариант(вместо
гифки можно, например, поставить видео).
P.S. Интересно было бы посмотреть решение с обрезкой фоновой картинки(cover). Все
таки и в моём варианте, и в решении Alexandr_TT пропорции фона сохраняются.



*{
  box-sizing:border-box;
}
body{
  margin:0;
}
img{
  max-width:100%;
}
.room{
  position:relative;
}
.room__bg{
  display:block;
  width:100%;
  height:auto;
}
.room__tv{
  position:absolute;
  top:21.7%;
  left:30.15%;
  width:19.3%;
  height:20.2%;
  background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/220px-Rotating_earth_%28large%29.gif)
no-repeat center/cover;
}

  
  




Ответ 3

Можно сделать ещё проще по топорному если не критичен размер изображений либо разрешение
не слишком высоко. Берёте фон и загружаете в фотошоп, добавляете нужный элемент другим
слоем и позиционируете, скрываете фон и сохраняете картинку с элементом. получаем и
фон и элемент одинакового размера, у элемента соответственно фон прозрачный. в вёрстке
размещаете оба блока друг над другом , делаете background-size:cover;background-position:
50% 50%;width:100%;height:100%;left:0;top:0; и всё.