Фоновое изображение не работает на реальных мобильных устройствах + другие проблемы с настройками фонового изображения — Общее — Форум

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 Нравится

Гилсон (Жилсон Барбоза Нуньес Филью)

11 декабря 2018 г., 22:00 2

Привет @VladyRahn

Проблема в поддержке браузера. Простые, мобильные браузеры плохо работают с background-attachment: fixed . Вы можете попробовать заставить его работать, используя position: fixed , но я не думаю, что это хорошая привычка. Просто привыкните к тому, что называется изящной деградацией. Эта функция не работает, но сайт работает без нее.

Вы можете проверить поддержку браузера здесь:

2 лайков

Гилсон (Жилсон Барбоза Нуньес Филью) 3

Что касается главного изображения на мобильном телефоне, вы не устанавливаете его на , а не на здесь, с моей стороны. Так как вы используете градиент в качестве фонового наложения, вы должны просто установить ширину изображения на 100% и выровнять его по нижнему краю.

ВладиРан (Владимир Ран)

12 декабря 2018 г., 18:59 4

Привет, @gilson,

, спасибо за помощь. Фоновые изображения устанавливаются на фиксированное положение, поэтому я не уверен, почему они не фиксируются на мобильных устройствах, но я думаю, как вы сказали, проблема заключается в поддержке браузера, что действительно очень плохо. Попытка обойти это с блоками div, установленными на различные уровни Z-индекса и скользящими друг за другом с помощью прокрутки. Проблема в том, что фоновые изображения становятся практически недоступными для редактирования в редакторе, потому что значок редактирования становится неактивным.

Кстати, некоторые фоновые изображения героев на самом деле установлены на обложку. Когда я пытаюсь нажать кнопку «обложка», она не выбирается так, как должна. Это, кажется, известная проблема, о которой я узнал после публикации этой темы, поскольку кто-то недавно сообщил, что есть проблема с неработающими должным образом кнопками «обложка» и «содержать», я обнаружил, что это тоже так. Я попытался установить главное изображение главной страницы на 100% ширины и выровнять его по низу, что привело к тому, что оно полностью исчезло под главным разделом, что происходит? Я должен выровнять его по низу, а затем перетащить обратно в поле зрения, что фактически не настраивает его для выравнивания по низу.

После этого я проверил свой G7, и фоновое изображение героя домашней страницы все еще выложено плиткой. Есть идеи, в чем может быть проблема?

Я до сих пор не понимаю, почему установка фонового изображения на обложку не приведет к автоматическому изменению размера фонового изображения для правильного покрытия на мобильных устройствах…

Заранее спасибо

VladyRahn (Владимир Ран)

5

С настройками фонового изображения столько проблем, что это невероятно, очень неприятно. Установка фонового изображения на 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 в реальном проекте

Щелкните один из приведенных ниже примеров, чтобы открыть визуальный редактор Shuffle с библиотекой пользовательского интерфейса, в которой используется выбранный компонент.

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Источник CSS

 . bg-fixed {
  background-attachment: исправлено;
} 

Дополнительные сведения в фоновом режиме CSS Tailwind

  • .bg-auto
  • .bg-крышка
  • .bg-содержать
  • .bg-нижняя часть
  • .bg-топ
  • .bg-центр
  • .bg-левый
  • .bg-левый-нижний
  • .bg-левый-верхний
  • . bg-право
  • .bg-справа-снизу
  • .bg-справа-вверху
  • .bg-местный
  • .bg-прокрутка
  • .bg-без повтора
  • .bg-повторить
  • .bg-repeat-x
  • .bg-repeat-y
  • .bg-повторный раунд
  • .
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *