Блог

Главная - Вопросы по программированию - Наложение двух изображений с разными верхними и левыми значениями

Наложение двух изображений с разными верхними и левыми значениями

#html #css #image #flexbox #css-selectors

#HTML #css #изображение #flexbox #css-селекторы

Вопрос:

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

HTML:

 <div class="tisane">
            <img id="2" src="images/herbal-tea-cup-png-images-35.png" alt="Tasse d'infusion de millepertuis" style="z-index: 2;"/>
            <img id="1" src="images/noirairbrush.png" alt="" style="z-index: 1;">
        </div>

CSS:

 .tisane {
      display: inline-flex;

  }

  .tisane img #2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 220px;
    position: absolute;
    top: 300px;
    left: 140px;
  }
   .tisane img #1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 220px;
    position: absolute;
    top: 300px;
    left: 130px;

    
 }

Вот результат:

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

По сути, изображения по какой-то причине полностью покинули рамку, и я изменил только примерно пять пикселей для нового изображения (airbrushnoix.png). Все было размещено нормально до того, как я изменил верхние и левые значения.

Комментарии:

1. По сути, я хочу, чтобы аэрограф изображения находился под изображением чашки чая, но я не хочу, чтобы они были точно такими же значениями top: и left:

Ответ №1:

Во-первых, не начинайте идентификаторы с цифры. Потому что это не сработает. Идентификаторам классов разрешено начинаться с числа, а идентификаторам идентификаторов — нет. Так что это в основном ваша проблема. Вместо этого сделайте что-то вроде этого .tisane img#img1 { ... }

Попробуйте это

 .tisane {
  display: inline-flex;
  position: relative;
}

.tisane img#img2 {
  top: 80px;
  left: 0px;
}

.tisane img#img1 {
  top: 0;
  left: 130px;
}

.tisane img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 220px;
  position: absolute;
}  
 <div class="tisane">
  <img id="img1" src="https://static-s.aa-cdn.net/img/ios/932332871/edd30e1f8a35bdfdd85c921fe1a6c616?v=1" />
  <img id="img2" src="https://www.meme-arsenal.com/memes/b0c73f50f74400e6458644eac56fa9f5.jpg" />
</div>