Блог

Главная - Вопросы по программированию - Как наложить два изображения, но расположить их так, чтобы они выглядели как одно?

Как наложить два изображения, но расположить их так, чтобы они выглядели как одно?

#html #css

Вопрос:

Можно ли расположить одно изображение поверх другого изображения, используя только CSS, так, чтобы даже при масштабировании изображения / изменении размера окна изображения находились в одном и том же относительном положении? Таким образом, для пользователя это в значительной степени выглядит так же, как если бы это было одно плоское изображение.

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

 <style>
.container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
}
.myDiv {
  height: 100%;
  width: 100%;
  background-image: url('https://toppng.com/uploads/preview/red-dot-icon-png-bowling-ball-transparent-background-11562953794gu3xfby6c8.png'), url('https://image.freepik.com/free-photo/selective-focus-shot-adorable-kooikerhondje-dog-field_181624-29383.jpg');
  background-size: 5% auto, cover;
  background-repeat: no-repeat;
  background-position: 50% 75%, 0 0;
  background-blend-mode: normal;
}
</style>
<div class="container>
  <div class="myDiv" />
</div>

Моя попытка заключалась в использовании процентов для всего (размер фона и положение). Я подумал, что по мере масштабирования изображения будет изменяться и положение, но оно работает не так, как ожидалось.. красная точка иногда оказывалась за пределами уха собаки или просто в другом месте внутри уха.

Ответ №1:

Абсолютно точно расположите свой шарик png и используйте процентные значения для ваших top и left свойств. До тех пор, пока все ваши размеры будут в процентах, все ваши элементы будут масштабироваться пропорционально.

Вы также можете использовать десятичные дроби для своих позиций (например top:20.25% ), чтобы при необходимости поместить их в нужное место.

 .container {
  width:70%;
  margin:auto;
  position:relative;
}

.container img.under {
  width:100%;
  height:auto;
}
.container img.over {
  position:absolute;
  top:20%;
  left:45%;
  z-index:1;
  width:10%;
  height:auto;
} 
 <div class="container">
  <img class="over" src="https://toppng.com/uploads/preview/red-dot-icon-png-bowling-ball-transparent-background-11562953794gu3xfby6c8.png" />  
  <img class="under" src="https://image.freepik.com/free-photo/selective-focus-shot-adorable-kooikerhondje-dog-field_181624-29383.jpg" />  
</div>
Метки: , ,