Блог

Главная - Вопросы по программированию - Изображение не отображается в css, работает с position:relative

Изображение не отображается в css, работает с position:relative

#html #css #image #position #z-index

#HTML #css #изображение #позиция #z-индекс

Вопрос:

Недавно я изменил все свои элементы на position: absolute , потому что все они были относительными раньше, и теперь мое фоновое изображение не будет отображаться (или выполнять анимацию).

 #firstbody {
  position: absolute; 
  z-index: 20;
}

#h1first {
  position: absolute; 
  width: 100%;
  margin: 200px 0px 0px 120px;
  padding: 0px 200px 0px 100px;
  color: rgb(0, 0, 0);
  font-family: Montserrat, Helvetica; 
  font-weight: bold;
  text-shadow: 0px 0px 4px white;
  white-space: nowrap
}
#firstbox {
  position: absolute;
  padding: 20px 300px 0px 30px;
  width: 500px;
  top: 300px;
  margin: 0px 0px 0px 200px;
  font-family: Montserrat, Helvetica;
  color:rgb(0, 0, 0);
  font-size: 20px; 
  font-weight: bold;
  text-shadow: 0px 0px 4px white;
  text-shadow: 0px 0px 2px white;
}
#maincontent {
  margin:40px 180px 0px 180px;
  position: absolute;
  background-color: rgba(110, 255, 175, 0);
  /*box-shadow: 0px 5px 15px grey; */
  border-radius: 15px;
}
#background {
  position: absolute;
  width: 100%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  animation-name: slidein; 
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-timing-function: ease;
  z-index: 50;
}

@keyframes slidein {
  0% {top: -2000px;}
  100% {top: 0px;}
} 
 <body>
        <div id="firstbody">
            <div id="whitetransparency">
                
                <img id="background" src="https://raw.githubusercontent.com/Pleyur/pleyur.github.io/main/topbackground.jpg" alt="topbackgroundimage">
            </div>
        </div> 
</body>

Я вынул #first body в html, и это сработало, но я не знаю, почему это не работает, когда я его добавляю. Это как-то связано с позицией?

 #firstbody {
  position: absolute; 
  z-index: 20;
}

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

1. width изображения есть 100% , но есть родители width 0px . Так 100% 0 что все по-прежнему 0 . Элементы, которые absolute всегда пытаются быть как можно меньше, пока вы не укажете какой-либо атрибут пропорций.

2. Спасибо! Это устранило проблему. : D

Метки: