Почему изменение макета страницы? - PullRequest
Новая
       23

Почему изменение макета страницы?

1 голос
/ 28 апреля 2020

Я писал веб-страницу с фоновым изображением. Вот для этого CSS: 

body {
    image-rendering: pixelated;
    background-image: url("Images/page-background.png");
    background-size: 100% 100%;
}

Это сработало нормально; изображение имело те же размеры, что и страница. Затем я понял, что забыл включить <!DOCTYPE html> в верхней части html, поэтому я добавил, потому что я думал, что это ничего не изменит. Когда я снова загрузил страницу, фоновое изображение повторялось повсюду, по всей странице. Может кто-нибудь объяснить, почему это произошло, и что я могу сделать, чтобы это исправить? Действительно ли удаление <!DOCTYPE html> снова нормально, или есть способ исправить это?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Как я объяснил здесь: Как удалить полосы, которые появляются при использовании свойства линейного градиента Вы сталкиваетесь со сложным фоновым распространением при установке bacground-size:100% 100% с добавленным типом документа: 

body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: 100% 100%;
    background-position: center;
}

То же самое произойдет с окраской градиента, поскольку градиент будет иметь размер 100% 100% по умолчанию: 

body {
    image-rendering: pixelated;
    background-image:linear-gradient(to bottom,red,blue);
}

Чтобы решить вашу проблему, вам просто нужно убедиться, что элемент html имеет по крайней мере height:100%

html {
  min-height:100%;
}

body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: 100% 100%;
    background-position: center;
}

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

0 голосов
/ 28 апреля 2020

Это должно дать вам одно изображение, отображаемое в полном размере браузера, даже если у вас есть <!DOCTYPE> (который я рекомендую включить do , так как это лучше практиковать): 

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
}
body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Обратите внимание, что важно убедиться, что элементы html и body имеют размер 100% (и удалить все поля по умолчанию + отступы, добавленные браузером).

Примечание. Я использовал случайный пример изображения.

РЕДАКТИРОВАТЬ: Д. Пардал справедливо указал, что этот ответ не объясняет наблюдаемую разницу.

Большая часть объяснений исходит из факта что:

  • Добавление <!DOCTYPE html> переводит документ в «стандартный режим»
  • «Стандартный режим» диктует, что высота элемента body по умолчанию равна минимальному размеру, необходимому для его содержания. content

Оригинальная версия без <!DOCTYPE html> имеет <body>, который заполняет страницу. Применяя фоновое изображение к этому <body>, с background-size: 100% 100% заполняет всю страницу. Добавление DOCTYPE уменьшает высоту body.

"Почему изображение вообще видно, если его высота равна высоте <body>, равной 0?"

Поскольку тело имеет поля по умолчанию, применяемые браузером, и они учитываются по высоте фонового изображения.

"Почему изображение не повторяется в первое место? "

Это повторялось! Первое повторение, однако, было достаточно большим, чтобы заполнить весь родитель. Это можно проверить, удалив DOCTYPE и уменьшив размер изображения до background-size: 20% 20%;.

...