Блог

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

Это мой html:

 <div class="slideshow">
      <div class="slideshow-item-container">
        <div class="slideshow-item">
          <a href="humans/embryonic-development.html">
          <img src="img/baby.jpg" alt="A newborn baby"/>
          <h2 class="item-text">The Qur'an on Human Embryonic Development</h2></a>
        </div>
        <div class="slideshow-item">
          <a href="humans/the-cerebrum.html">
          <img src="img/brain.jpg" alt="The Cerebrum and Its Parts"/>
          <h2 class="item-text">The Cerebrum in Quran</h2> </a>
        </div>
        <div class="slideshow-item">
          <a href="humans/the-cerebrum.html">
          <img src="img/ocean.jpg" alt="The Cerebrum and Its Parts"/>
          <h2 class="item-text">Where the oceans meet</h2> </a>
        </div>
        <div class="slideshow-item">
          <a href="humans/embryonic-development.html">
          <img src="img/baby.jpg" alt="A newborn baby"/>
          <h2 class="item-text">The Qur'an on Human Embryonic Development</h2></a>
        </div>
      </div>
    </div>
  

И CSS:

 *{
  margin: 0;
  padding: 0;
}


.slideshow {
  overflow: hidden;
  margin-top: 20px;

}

.slideshow-item-container {
  position: relative;
  width: 400%;
  left: 0;
  animation: 20s slider infinite;
}

.slideshow-item {
  width: 25%;
  float: left;
}

h2.item-text {
  margin-top: -48px;
  margin-right: 20px;
  text-align: right;
  background-color: #2b5072;
  color: white;
}
  

Несмотря на свойство background, оно по-прежнему не отображает его. Вот скриншот:
скриншот сайта без цвета фона, отображаемого в заголовке

Просто потому, что вы прокрутили текст на картинке, вам нужно добавить приведенный ниже код, чтобы он перекрывался.

Вы можете изучить фрагмент, чтобы проверить его.

 h2.item-text {
  .
  .
  .
  position: relative;
  z-index: 1;
}
  

 * {
  margin: 0;
  padding: 0;
}

.slideshow {
  overflow: hidden;
  margin-top: 20px;
}

.slideshow-item-container {
  position: relative;
  width: 400%;
  left: 0;
  animation: 20s slider infinite;
}

.slideshow-item {
  width: 25%;
  float: left;
}

h2.item-text {
  margin-top: -48px;
  margin-right: 20px;
  text-align: right;
  background-color: #2b5072;
  color: white;
  position: relative;
  z-index: 1;
}  

 <div class="slideshow">
  <div class="slideshow-item-container">
    <div class="slideshow-item">
      <a href="humans/embryonic-development.html">
        <img src="https://placeimg.com/1640/380/any" alt="A newborn baby" />
        <h2 class="item-text">The Qur'an on Human Embryonic Development</h2>
      </a>
    </div>
    <div class="slideshow-item">
      <a href="humans/the-cerebrum.html">
        <img src="https://placeimg.com/1640/380/any" alt="The Cerebrum and Its Parts" />
        <h2 class="item-text">The Cerebrum in Quran</h2>
      </a>
    </div>
    <div class="slideshow-item">
      <a href="humans/the-cerebrum.html">
        <img src="https://placeimg.com/1640/380/any" alt="The Cerebrum and Its Parts" />
        <h2 class="item-text">Where the oceans meet</h2>
      </a>
    </div>
    <div class="slideshow-item">
      <a href="humans/embryonic-development.html">
        <img src="https://placeimg.com/1640/380/any" alt="A newborn baby" />
        <h2 class="item-text">The Qur'an on Human Embryonic Development</h2>
      </a>
    </div>
  </div>
</div>  

Попробуйте изменить свои изображения на фоновое изображение вашего тега div. Вот пример:

 <div class="square" style="border:solid 1px red; height:150px;background- 
  

изображение: url(‘https://www.campsitecoders.com/img/google-seo-search-engines.jpg ‘)»>
Фото 4

https://codepen.io/susanwinters/pen/wvWjvRb