Фоновое изображение не работает на реальных мобильных устройствах + другие проблемы с настройками фонового изображения — Общее — Форум
VladyRahn (Владимир Ран) 1
Привет всем,
У меня есть несколько проблем с фоновым изображением в моем первом клиентском проекте.
Я зафиксировал несколько фоновых изображений, и в дизайнере и в режиме предварительного просмотра все работает нормально. Но когда я публикую и использую настоящие мобильные устройства, такие как iPhone 8+, LG G7 ThinQ и iPad Air 2, фоновые изображения не фиксируются, они просто отображаются как обычное изображение, а остальная часть содержимого сайта не изменяется. не скользить по фоновым изображениям, как это должно быть, когда фоновое изображение установлено на фиксированное. Есть идеи, в чем может быть проблема?
Вот как это выглядит в дизайнере:
Рабочий стол%20Capture%202501×644 37,5 КБ
Вот как это выглядит на LG G7:
261440×3120 768 КБ
Screenshot_2018-12-10-15-07-331440×3120 811 КБ
И у меня также есть проблемы, когда я установил фоновое изображение героя на обложку, и оно будет отображаться таким образом в дизайнере а также в режиме предварительного просмотра, но он будет отображаться в виде плитки на реальных мобильных устройствах, включая iPhone 8+, LG G7 и iPad Air 2 9.
0005
Вот как это выглядит в дизайнере:
Рабочий стол%20Capture455×706 36,1 КБ
Вот как это выглядит на мобильных устройствах:
LG G7
G7%20-%120Screen 10-15-05-561440×3120 417 КБ
iPhone 8+
PNG1242×2208 284 КБ
Это то, как он выглядит на рабочем столе. точка останова:
Mobile%20Landscape%20bg%20resize%20capture1411×620 60,4 КБ
точка останова для мобильных устройств:
Mobile%20bg%20resize%20capture1408×657 49,1 KB фон 900 только один раз изменить размер с рабочего стола на точку останова планшета, но не будет продолжать изменять размер для последующих точек останова, в результате чего изображение, в данном случае французского бульдога, останется того же размера, что и в точке останова планшета, и будет обрезано для меньшего контрольные точки.
Вот ссылка только для чтения:
https://preview.webflow.com/preview/wallys-bullys-ecom?utm_source=wallys-bullys-ecom&preview=22703db2a7b8e3d1909e7d0e18b6e276
Вот действующий сайт: https:
/wallys-bullys-ecom.webflow.io/
Заранее спасибо
Вот мой сайт только для чтения: ССЫЛКА
(как поделиться ссылкой на ваш сайт только для чтения)
1 Нравится
Гилсон (Жилсон Барбоза Нуньес Филью) 2
Привет @VladyRahn
Проблема в поддержке браузера. Простые, мобильные браузеры плохо работают с background-attachment: fixed . Вы можете попробовать заставить его работать, используя position: fixed , но я не думаю, что это хорошая привычка.
Просто привыкните к тому, что называется изящной деградацией. Эта функция не работает, но сайт работает без нее.
Вы можете проверить поддержку браузера здесь:
2 лайков
Гилсон (Жилсон Барбоза Нуньес Филью) 3
Что касается главного изображения на мобильном телефоне, вы не устанавливаете его на , а не на здесь, с моей стороны. Так как вы используете градиент в качестве фонового наложения, вы должны просто установить ширину изображения на 100% и выровнять его по нижнему краю.
ВладиРан (Владимир Ран) 4
Привет, @gilson,
, спасибо за помощь.
Фоновые изображения устанавливаются на фиксированное положение, поэтому я не уверен, почему они не фиксируются на мобильных устройствах, но я думаю, как вы сказали, проблема заключается в поддержке браузера, что действительно очень плохо. Попытка обойти это с блоками div, установленными на различные уровни Z-индекса и скользящими друг за другом с помощью прокрутки. Проблема в том, что фоновые изображения становятся практически недоступными для редактирования в редакторе, потому что значок редактирования становится неактивным.
Кстати, некоторые фоновые изображения героев на самом деле установлены на обложку. Когда я пытаюсь нажать кнопку «обложка», она не выбирается так, как должна. Это, кажется, известная проблема, о которой я узнал после публикации этой темы, поскольку кто-то недавно сообщил, что есть проблема с неработающими должным образом кнопками «обложка» и «содержать», я обнаружил, что это тоже так. Я попытался установить главное изображение главной страницы на 100% ширины и выровнять его по низу, что привело к тому, что оно полностью исчезло под главным разделом, что происходит? Я должен выровнять его по низу, а затем перетащить обратно в поле зрения, что фактически не настраивает его для выравнивания по низу.
Я до сих пор не понимаю, почему установка фонового изображения на обложку не приведет к автоматическому изменению размера фонового изображения для правильного покрытия на мобильных устройствах…
Заранее спасибо
VladyRahn (Владимир Ран)
С настройками фонового изображения столько проблем, что это невероятно, очень неприятно. Установка фонового изображения на 100% высоты должна установить его на 100% высоты его родительского элемента, верно? Ну, он устанавливает его на 100% высоты окна просмотра, а не на родительский элемент! Для меня почти невозможно заставить фоновые изображения выглядеть так, как я хочу, и реагировать на все точки останова.
Поскольку фиксированная функция фонового изображения не поддерживается для мобильных устройств, я пытаюсь обойти это, используя div за основным разделом, скользящим вверх и вниз с анимацией прокрутки. Я хотел, чтобы изображение выглядело так:
background%20scroll%20image%20setting%20problems%2011105×508 40,6 КБ
Этого я добился, установив высоту на авто и ширину на 100%, работает, как и ожидалось, за исключением того, что Мне нужно, чтобы изображение было выше, чем раздел, чтобы оно не открывало черные области над и под изображением во время анимации прокрутки, например:
Поэтому я решил установить ширину на авто и высоту на что-то большее, чем 100%, чтобы черные области не отображались. Ну, это по какой-то причине не устанавливает его на 100% от его родительского элемента, он устанавливает его на 100% от высоты окна просмотра, чего можно было бы ожидать, если бы я использовал VH, верно? Как вы можете видеть здесь:
background%20scroll%20image%20setting%20problems%2021106×520 40,8 КБ
Я делаю что-то не так или это тоже ошибка?
Заранее спасибо
ВладиРан (Владимир Ран) 6
Привет @Brando,
Я вижу, что я не единственный, у кого проблемы с настройками фонового изображения, и что люди также пишут об этом. Я бы очень хотел, чтобы кто-то тоже посмотрел на это, не уверен, что у других есть те же проблемы, что и у меня, но это то, с чем я боролся некоторое время. Эта проблема кажется вам знакомой? Любая идея, как скоро может быть решение для этого?
Заранее большое спасибо
Брандо (Брэндон Роше) 7
Привет @VladyRahn
Ошибка, с которой сталкиваются другие, связана с изменением дизайна при нажатии другой кнопки в пользовательском интерфейсе.
Эта проблема больше связана с ограничениями дизайна/CSS.
В частности, для этого изображения в настоящее время установлено значение высоты 100%, поэтому оно будет заполнять родительский элемент.
Однако у вас также есть анимация прокрутки. Поскольку этот элемент имеет тот же размер, что и «окно», через которое вы его видите, перемещение его вверх и вниз покажет серый фон. Это ожидаемое поведение, но в настоящее время оно не разрабатывается.
Я бы порекомендовал увеличить размер изображения до 400 пикселей:
13%20PM460×728 56,9 КБ 100% штук):
45%20PM600×1606 50,5 КБ
Вы сохраните аналогичный эффект, но не будет отображаться серый фон
1 Like
исправлено — Класс CSS Tailwind
← Список классов CSS Tailwind
<дел> <дел>
bg-fixed {
background-attachment: исправлено;
} 
bg-право
