Наличие изображения на заднем фоне всегда в одной и той же позиции?

Question

Я думаю, что у меня есть невыполнимая задача, но прежде чем отказаться от этого, я хочу быть уверенным, что это действительно невозможно. Возможно, это возможно с миллионами медиа-запросов, но это не стоит борьбы.

Тем не менее, у меня есть фоновое изображение с высотой 100vh, что означает, что это всегда 100% высота окна пользователя и ширина 100%. Эти две вещи могут сделать мою задачу невозможной.

В пределах фонового изображения у меня есть другое изображение, которое всегда должно быть в этой позиции, несмотря ни на что.

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

(stackoverflow не разрешает изображения с http, поэтому, пожалуйста, измените src на http или посмотрите на мой код: https://codepen.io/anon/pen/yjXbPL)

.background {
  background-repeat: no-repeat;
  background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100%;
}

img {
  width: 150px;
  position: fixed;
  top: 240px;
  right: 780px;
  transform: rotate(-20deg)
}

<div class="background">
  <img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>

Возможно ли это?

Answer 1

Причина, по которой это может быть действительно трудно достичь, заключается в том, что вы используете background-size: cover;, что означает растяжение изображения при сохранении его соотношения сторон и обрезание изображения, чтобы соответствовать высоте и ширине контейнера. Когда вы комбинируете это с background-position: center center;, оно будет одинаково обрезаться по краям. Наконец, вы используете два разных вида единиц измерения: height: 100vh; width: 100%;

Тогда возникает вопрос, перед тем, как изображение обрезается, каковы новые ширина и высота изображения, которое применяет «обложка»?

Это что-то очень сложное для CSS, чтобы определить, потому что это требует таких вещей, как знание соотношения вашего изображения (2560x1600 имеет соотношение 1,6: 1), затем попытка поместить его в контейнер переменной ширины и высоты так, чтобы он Достаточно небольшого размера, чтобы заполнить его, при этом обрезая что-либо, оставленное до обрезания, каков реальный размер изображения?

И height: 100vh;, и width: 100%; влияют на его размер, как описано выше. Поскольку для этого необходимо сравнить исходную высоту и ширину изображения с шириной и высотой контейнера, чтобы определить, как растянуть изображение, попытка вычислить этот тип математики с помощью чистого CSS - непростая задача для CSS, которую можно достичь без некоторой помощи со стороны JavaScript.

Достойным решением является добавление прозрачности к изображению ракеты, чтобы оно имело тот же размер, что и фон, чтобы оно также могло проходить через ту же логику растяжения и обрезки "покрытия".

Дайте этому шанс:

https://codepen.io/anon/pen/xjrPvM

HTML:

<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1"> 
  <div class="rocket">
</div>
</div>

CSS:

.background {   
    background-repeat: no-repeat;
    background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
    background-size: cover;
    background-position: center center;
    height: 100vh;
    width: 100%;
}

.rocket {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    width: 100%;
    background-image:     
    url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}

В коде ручки я использовал версию "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparent.png" в кодировке base64. это просто ракета, помещенная на холст 2560x1600, который я сделал в GIMP, преобразовал его на -20,0 градусов, переместил, чтобы он поместил туда, куда вы хотите, а затем экспортировал в формате PNG.

Answer 2

До некоторой степени это возможно. Вот мое решение для этого, я попробовал и протестировал ваш код. Это изменения для исправления вашего кода:

Установите положение изображения на fixed:

img
{
      width: 150px;
      position: fixed;
      top: 50%;
      margin-top: 20px; (adjust some pixels as per your need)
      right: 50%;
      margin-right: -90px;(adjust some pixel as per your need)
      transform: rotate(-20deg)
}

Вот полный рабочий пример: https://codepen.io/atulraj89/pen/MGooLr

Answer 3

Вместо того, чтобы использовать изображение в качестве фона, я использовал встроенное изображение с ракетой, расположенной сверху. Затем ракета и задний план становятся отзывчивыми относительно друг друга.

.background {
  position: relative;
}
.background img {
  max-width: 100%;
  display: block;
}
#rocket {
  top: 49%;
  left: 47%;
  width: 15%;
  height: 15%;
  background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transform: rotate(-20deg)
}

<div class="background">
  <img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
  <div id="rocket"></div>
</div>

Answer 4

Прикрепленный кодсниппет показывает вам решение. Он основан на том, что вы помещаете свою ракету и фон в 2 разных элемента и складываете их с помощью CSS-индекса. Далее ракета зафиксирована, и я добавил высоту фона, которая делает его немного прокручиваемым.

Теперь, чтобы решить графическое разделение ракеты и фонового изображения, вам нужно будет создать их как 2 разных изображения и поместить их в каждый соответствующий div в HTML (см. Codesnippet).

С точки зрения использования различных устройств вам придется проверить, как ракета может изменить положение, и решить это с помощью комбинации медиазапросов и, возможно, использовать% position вместо px (для правильного позиционирования ракеты):

.background-pic {
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 1000px;
  background-color: darkblue;
}

.rocket {
  position: fixed;
  z-index: 2;
  width: 50px;
  height: 50px;
  background-color: orange;
  margin: 100px 0px 0px 100px;
}

<div class="background-pic"></div>
<div class="rocket"></div>

Answer 5

Используйте фиксированное положение, как и вы. Используйте Левый и верхний, а не правый. Поместите изображение рядом с фоновым div, а не в него.