- 16, May 2024
- #1
Привет
У меня довольно сложное фоновое изображение, поэтому сложно совместить все элементы на странице с изображением.
Хотя на большинстве экранов мне удалось выровнять все правильно, на некоторых экранах что-то смещается.
В качестве решения я подумал о том, чтобы разделить фоновое изображение на три фрагмента изображения, каждый из которых должен быть помещен в тег
. Теги
расположены вертикально, один под другим, что является расположением по умолчанию.
Проблема в том, что я не могу правильно покрыть каждый тег
фоновым изображением.
Таким образом, если я использую размер фона: содержат; в CSS с каждой стороны изображения есть поля, в результате чего между тегами образуется пробел.
Если я использую размер фона: обложка; вместо этого нет полей и пустого пространства, но фон не масштабируется вместе с окном.
В зависимости от разрешения экрана оно может не поместиться, даже если окно браузера развернуто на весь экран, и могут появиться полосы прокрутки.
Есть ли способ закрыть окно браузера этими тремя фрагментами изображения так, чтобы между ними не было пустого пространства (например, при использовании background-size: Cover; ) и в то же время все правильно масштабировалось вместе с окном (например, при использовании размер фона: содержать)?
Кстати, я пытался удалить это пустое пространство, вводя отрицательное значение поля-верха или указав положение: относительное, а затем отрицательное значение верхнего края.
В любом случае это работает, но только для определенного размера окна.
При изменении размера окна (или попытке использовать экран с другим разрешением) все ломается.
Хотя на большинстве экранов мне удалось выровнять все правильно, на некоторых экранах что-то смещается.
В качестве решения я подумал о том, чтобы разделить фоновое изображение на три фрагмента изображения, каждый из которых должен быть помещен в тег
. Теги
расположены вертикально, один под другим, что является расположением по умолчанию.
Проблема в том, что я не могу правильно покрыть каждый тег
фоновым изображением.
Таким образом, если я использую размер фона: содержат; в CSS с каждой стороны изображения есть поля, в результате чего между тегами образуется пробел.
Если я использую размер фона: обложка; вместо этого нет полей и пустого пространства, но фон не масштабируется вместе с окном.
В зависимости от разрешения экрана оно может не поместиться, даже если окно браузера развернуто на весь экран, и могут появиться полосы прокрутки.
Есть ли способ закрыть окно браузера этими тремя фрагментами изображения так, чтобы между ними не было пустого пространства (например, при использовании background-size: Cover; ) и в то же время все правильно масштабировалось вместе с окном (например, при использовании размер фона: содержать)?
Кстати, я пытался удалить это пустое пространство, вводя отрицательное значение поля-верха или указав положение: относительное, а затем отрицательное значение верхнего края.
В любом случае это работает, но только для определенного размера окна.
При изменении размера окна (или попытке использовать экран с другим разрешением) все ломается.
![Обучение составлению семантического ядра Key Collector (28 поток) [февраль 2017]](/assets/images/icons/forum0.png){kind=icon}
![[Чеузов Кирилл] - Сам себе](/assets/images/icons/forum7.png){kind=icon}