html — Фоновое изображение CSS в полноэкранном режиме на мобильных устройствах Android не идеально
спросил
Изменено 3 года, 3 месяца назад
Просмотрено 1к раз
вау. Насколько сложно создать полноэкранное фоновое изображение с помощью HTML и CSS? Кажется, довольно тяжело. По крайней мере, в Интернете полно ответов, таких как этот идеальный полноэкранный фон css и этот https://css-tricks.com/perfect-full-page-background-image/.
На самом деле демо по второй ссылке работает и на мобильных андроид устройствах: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Но мне пока не везет. Я скопировал стиль
html {
фон: url(/images/snowback.png) исправлен центр без повторов;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
размер фона: обложка;
}
К моей таблице стилей https://aoc-2019.
netlify.com/css/retro.css и все же фоновое изображение не идеально: https://aoc-2019.netlify.com
Сначала кажется, что все идеально, но браузер Android скрывает адресную строку, когда вы немного прокручиваете ее, и тогда размер фона не изменится. Это приводит к области внизу страницы, которая не покрыта фоновым изображением.
Как я уже сказал, приведенная выше демонстрация работает достаточно хорошо.
Чем моя страница отличается от демо-версии? Есть идеи?
- android
- html
- css
- фоновое изображение
Существует несколько различий в структуре страницы. Короче говоря, главное, что мешает ему работать так, как вы ожидали, — это присвоение высоты: 100% вашему HTML-элементу. Как вы можете прочитать здесь непосредственно с веб-сайта разработчиков Google, назначение высоты: 100% дает элементу высоту, доступную с отображаемой полосой, и не будет изменять размер, когда он будет скрыт.
Если вы не хотите пересматривать и изменять свой код и вам нужно быстрое решение, просто добавьте высоту 110% в HTML, и вы получите тот же эффект, что и в сравниваемой ссылке.
1
Различия, которые я могу легко заметить, это…
Версия CSS-Tricks: html и body не имеют высоты или минимальной высоты.
Ваша версия: html и body установлены слишком 100% для высоты и минимальной высоты.
Версия CSS-Tricks: для тела установлено значение overflow-x: hidden;
Ваша версия: Нет правил переполнения для тела.
Я предлагаю вам точно воспроизвести то, что они сделали, без добавления контента, убедитесь, что все работает как положено. Затем воссоздайте его на своем сайте.
Если выяснится, что проблема заключается в 100%-ной высоте и минимальной высоте, а они нужны для липкого нижнего колонтитула или чего-то в этом роде. Затем вы можете использовать вторичный div-оболочку, чтобы упростить липкий нижний колонтитул. Например, поместите правила высоты/минимальной высоты в div с полной оболочкой, затем внутри этого используйте обертку страницы, как обычно, с липким нижним колонтитулом.
1
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
HTML фоновое изображение Адаптивное полноэкранное изображение, учебник html
Учебник HTML » Фоновое изображение HTML полноэкранное адаптивное
В следующем примере показано полноэкранное адаптивное фоновое изображение.
Создавая фон веб-страницы, мы будем использовать следующие атрибуты CSS:
background: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg ) фиксированный центр неповторяющегося центра;
-moz-background-size: обложка;
-o-background-size: обложка;
background-size: обложка;
Синтаксис:
Синтаксис: Внешний CSS.
фон: значение ;
-webkit-background-size: значение ;
-moz-background-size: значение ;
-o-background-size: значение ;
размер фона: значение ;
Примечание. вместо этого используйте внешний CSS.
Вы можете попробовать выполнить следующий код.
Пример:
Пример 1. Как создать полноэкранное фоновое изображение HTML
<голова>
<стиль>
тело, html {
/* Аккуратно центрируем и масштабируем изображение */
фон: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg) исправлен центр без повторов;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
размер фона: обложка;
}
.текст {
цвет: #EEE;
семейство шрифтов: Verdana, Geneva, без засечек;
размер шрифта: 18px;
вес шрифта: полужирный;
отступ: 26px;
}
.текст2 {
цвет:#999;
семейство шрифтов: Verdana, Geneva, без засечек;
размер шрифта: 18px;
вес шрифта: полужирный;
отступы: 1000 пикселей;
отступ справа: 26px;нижний отступ: 26px;
отступ слева: 26px;
}
<тело>
<дел>В этом примере создается фоновое изображение на всю страницу.
