Блог

Мне нужно, чтобы одно изображение перекрывало другое. Но второе изображение имеет цвет фона, и мне нужно первое изображение между вторым и вторым цветом фона. Это возможно? Уже пытался создать новый «класс div» вместо style =»background-color». Теперь я застрял с этим:

 .mainRunner {
  position: relative;
}

.firstimage {
  position: relative;
  z-index: 2;
}

.secondimage {
  position: relative;
  z-index: 3;
  top: -75px;
}

.background {
  position: relative;
  z-index: 1
}

<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div>
<div class="background" style="background-color: #f2e5df;">
<div class="secondimage">
<a href=""> <img src="" alt="" title="" /> </a>
</div></div>
  

Вы не можете присвоить определенным свойствам элемента разные z-index значения. Однако для определенных элементов, таких как a, div вы можете использовать псевдоэлементы ::before и ::after . И вы можете установить z-index для них, эффективно создавая три слоя. Больше информации здесь.

В этом случае вы можете создать символ div с серединой img внутри. Затем добавьте к этому ::before и ::after div . Присвоение цвета фона и z-index значения -1. А другой — фоновое изображение и z-index из 1.

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

 .image { 
    margin: 20px 0 0 20px;
    position: relative;
    border: 3px solid coral;
    width: 200px;
    height: 300px;
 }

.image::before,
.image::after {
    content: '';
    display: block;
    width: 200px;
    height: 300px;
    position: absolute;
}

.image::before {
    z-index: -1;
    background: cornflowerblue;
    top: 20px;
    left: 20px;
}

.image::after {
    z-index: 1;
    background: url("https://www.fillmurray.com/200/300");
    top: -20px;
    left: -20px;
}  

 <div class="image"><img src="https://www.fillmurray.com/200/300" /></div>  

Если я правильно понимаю, чего вы пытаетесь достичь, вам, вероятно, следует размещать изображения в фоновом режиме div и размещать второе изображение с position: absolute :

 <style>
  .mainRunner {
  position: relative;
}

.firstimage {
  position: relative;
  z-index: 2;
}

.secondimage {
  position: absolute;
  z-index: 3;
  top: 20px; /* use top and left values to place the image exactly where you want it over the first image */
  left: 20px
}

.background {
  position: relative;
  z-index: 1;
  background-color: #f2e5df; 
}
</style>


<div class="mainRunner">
  <div class="background">
    <img src="image1.png" class="firstimage" />
    <img src="image2.png" class="secondimage " />
  </div>
</div>
  

Он устанавливает цвет фона в качестве самого заднего элемента, затем поверх него secondimage и firstimage .

Спасибо всем за их идеи. В итоге решение было простым. В стиле было двойное определение второго изображения. И первый из них был только частично прокомментирован. Итак, мой первый пост работает именно так:

 .secondimage img{
    max-width: 100%;
    height: auto;
    position: relative;
    top: -75px;
    margin: 5px;
        margin-bottom: 10px;
}
  

Теперь просто нужно выяснить, как закрыть этот вопрос…
Спасибо 🙂

Ответ просто нет … нет способа адресовать z-index конкретно к фону элемента, z-index и все другие свойства CSS работают со всем элементом, а не только с его фоном.

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