9

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

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;
}
<div class="bg-cover">
  <div class="element"></div>
</div>

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

фон

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

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

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

4
  • @Air, вероятно, о телевизоре на фото.
    – Qwertiy
    6 фев 2018 в 14:41
  • Важно, является ли фон фоном всего окна или это какой-то элемент.
    – Qwertiy
    6 фев 2018 в 14:42
  • @Qwertiy Да я уже сообразил после твоей правки)))) Кстати вчера вроде видел подобный вопрос
    – Air
    6 фев 2018 в 14:42
  • @Meetromb Добро пожаловать на stackoverflow! Первый вопрос и сразу на уровне. 6 фев 2018 в 16:46

3 ответа 3

12

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

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

<style>
html, body, .bg-cover {
  height: 100%;
  margin: 0;
}
.element {
width:100%; 
height:100%;
}

</style> 
<div class="bg-cover">
  <div class="element">
  <svg viewBox="0 0 1776 943">
  <image xlink:href="https://i.stack.imgur.com/JkEWk.jpg" width="100%" height="100%" />
  <image xlink:href=" https://i.stack.imgur.com/keh4g.jpg" x="537" y="212" width="19.1%" height="19.1%" />
  </svg>
   </div>
</div>  

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

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

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

3
  • Гениально....)))))
    – Air
    6 фев 2018 в 17:48
  • Даже не сомневался)
    – Arthur
    6 фев 2018 в 18:14
  • @Meetromb К сожалению хорошая литература об SVG только на английском.На русском я встречал только две стоящие книги: 1.Вадим Дунаев - Основы SVG и перевод J. David Eisenberg - SVG Essentials 6 фев 2018 в 22:10
3

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;
}
<div class="room">
  <img src="//i.stack.imgur.com/JkEWk.jpg" class="room__bg" alt="" />
  <div class="room__tv"></div>
</div>

1
  • Ну так не договаривались гифки, видео вставлять :))) Ответ хороший, ловите плюс Вам надо было ответ разместить в соседнем топике = Имитация смены изображений на экране TV - ru.stackoverflow.com/q/794050/28748 Можно здесь оставить ответ и там ответить с добавлением видео на экран TV 6 мар 2018 в 9:29
0

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

1
  • работающий код разместите, пожалуйста в снипет. чтобы проверить вашу версию на работоспособность и главное адаптивность 2 мая 2018 в 6:57

Ваш ответ

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

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