html — позиция: исправлена с фоновым изображением?
спросил
Изменено
6 лет, 3 месяца назад
Просмотрено
5к раз
Когда я добавляю на страницу, я обнаруживаю, что должен добавить position: fixed; в CSS, чтобы изображение отображалось в качестве фона в «div», иначе я получаю пустой белый фон. Почему для этого требуется, чтобы position = fixed в этом случае?
.background_image{
положение: фиксированное; <-----Зачем это нужно и почему статика не работает?
background: #000 url(../Images/Image.jpg) center center;
ширина: 100%;
высота: 100%;
минимальная высота: 100%;
размер фона: обложка;
переполнение: скрыто;
}
Вот образец html. Очевидно, внутри div есть другие элементы, и я импортирую css по ссылке в заголовке.
<тело>
<дел>
html
background
position
Это происходит потому, что height: 100% работает в position: fixed . Когда вы удаляете эту позицию, она не принимает эту высоту . Итак, есть еще один способ сделать это. Вы можете использовать vh единиц. Удалите позицию fixed и добавьте этот фон css :
.background_image{
высота: 100вх;
background: #000 url(../Images/Image.jpg) center center;
ширина: 100%;
минимальная высота: 100%;
размер фона: обложка;
переполнение: скрыто;
}
2
Средний html, поэтому страница должна соответствовать правилу HTML 5
ИЗ MDN CSS документ
Свойство CSS position выбирает альтернативные правила для позиционирования
элементы, предназначенные для использования в сценарных анимационных эффектах.
Значения
статический
Это ключевое слово позволяет элементу использовать обычное поведение, т.е.
размещается в своем текущем положении в потоке. Сверху, справа, снизу,
свойства left и z-index не применяются.
родственник
Это ключевое слово размещает все элементы так, как если бы элемент не был
позиционирован, а затем отрегулируйте положение элемента, не меняя
макет (и, таким образом, оставить зазор для элемента, где он должен был бы
было бы, если бы оно не было позиционировано). Эффект положения: относительно
таблица-*-группа, таблица-строка, таблица-столбец, таблица-ячейка и заголовок таблицы
элементы не определены.
абсолютный
Не оставляйте места для элемента. Вместо этого расположите его в
указанная позиция относительно его ближайшего расположенного предка, если таковой имеется,
или иным образом относительно исходного содержащего блока.
Абсолютно
позиционированные блоки могут иметь поля, и они не сворачиваются ни при каких обстоятельствах.
другие маржи.
фиксированный
Не оставляйте места для элемента. Вместо этого расположите его в
заданное положение относительно окна просмотра экрана и не перемещать его
при прокрутке. При печати расположите его в этом фиксированном положении на
каждую страницу. Это значение всегда создает новый контекст стека. Когда
предок имеет свойство преобразования, установленное на что-то другое, чем
нет, то этот предок используется как контейнер вместо области просмотра
0
Вы должны использовать свойство background-attachment с изображениями.
background-attachment может иметь одно из двух значений.
background-attachment: фиксированный|прокрутка;
свойство position используется для позиционирования html-элементов, таких как div, p и т. д. Таким образом, вы не можете использовать его с изображениями.
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Фоновое вложение CSS | Могу ли я использовать.
.. Таблицы поддержки для HTML5, CSS3 и т. д.
Могу ли я использовать
Поиск
?
Фоновое вложение CSS
- CR
Глобальное использование
79,31%
+
4,08%
знак равно
83,39%
Метод определения способа прикрепления фонового изображения к прокручиваемому элементу. Значения включают прокрутка (по умолчанию), фиксированная и локальная .
Chrome
4 - 106: Поддерживается
107: Поддерживается
108 - 110: 70024
12 - 106: Поддержка
12 -106: Поддержка
12 -106: Поддержка 14% - Supported">. : Частичная поддержка
Очевидно, внутри div есть другие элементы, и я импортирую css по ссылке в заголовке.
д. Таким образом, вы не можете использовать его с изображениями.
.. Таблицы поддержки для HTML5, CSS3 и т. д.
14% - Supported">. : Частичная поддержка
68% - Supported"> 106: поддержка9 9018 3 - 105.
23% - Not supported"> 13 -16,0221: не поддерживает
