Почему фон становится белым, когда я добавляю элемент абсолютной позиции? - PullRequest
Новая
       63

Почему фон становится белым, когда я добавляю элемент абсолютной позиции?

0 голосов
/ 17 февраля 2019

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

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

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}
<header>
  <h1>Hello!</h1>
</header>

Вы можете запустить код здесь: https://jsfiddle.net/Jhugorn/dsknqp7x/1/ Если вы удалите заголовок в CSS, фон будет выглядеть просто отлично.Как я могу заставить фон появляться и централизовать этот элемент одновременно?

1 Ответ

0 голосов
/ 17 февраля 2019

Добавьте немного высоты к телу, чтобы увидеть фон: 

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
<header>
  <h1>Hello!</h1>
</header>

Ваше тело не содержит никакого элемента в потоке, поэтому его высота равна 0 (то же самое для высоты html), и это сделаетфон размером 0, поэтому вы ничего не увидите.

Вы не обязаны указывать высоту 100vh.Даже небольшого заполнения может быть достаточно из-за из-за распространения фона .Изображение не будет таким же, но вы вряд ли заметите это в этом случае. 

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  padding:5px;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
<header>
  <h1>Hello!</h1>
</header>

Небольшой отступ для HTML тоже подойдет: 

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);

}
html {
  padding:2px;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
<header>
  <h1>Hello!</h1>
</header>

Большое заполнение заставит вещи выглядеть иначе! 

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);

}
html {
  padding:40px;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
<header>
  <h1>Hello!</h1>
</header>

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

...