Использование фонового вложения: исправлено в safari на ipad

Я ищу, чтобы воссоздать эффект, похожий на приложение популярной науки. В основном есть одно большое фоновое изображение, а затем поверх него есть HTML / CSS-слой. Когда пользователь прокручивает содержимое, тогда фоновая позиция изображения должна оставаться на месте, а не прокручиваться.

Очевидно, что в «обычном» браузере я бы использовал background-attachment: fixed, но, похоже, это не работает на ipad. Я знаю, что позиция: исправлено не работает, как вы могли бы ожидать по спецификации safari, но есть ли способ достичь этого?

Вы можете использовать этот код, чтобы фиксированный фоновый слой взломал эту проблему.

#background_wrap { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: 100%; background-image: url('xx.jpg'); background-attachment: fixed; } 

И положите

в

  

Мобильное safari масштабирует весь ваш сайт до размера видового экрана, включая фоновое изображение. Чтобы добиться правильного эффекта, используйте свойство CSS -webkit-background-size для объявления вашего фонового размера:

 -webkit-background-size: 2650px 1440px; 

(подсказка шляпы комментатору Mac )

Развернувшись на ответе Анлая выше, я обнаружил, что решение повторяло мое изображение, поскольку я прокручивал, а не фиксировал его. Если у кого-то еще была эта проблема, мой CSS для идентификатора background_wrap выглядит следующим образом:

 #background_wrap { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-image: url('../images/compressed/background-mobile.png'); background-repeat: no-repeat; background-attachment: scroll; } 

Просто изменили размер фона и фонового вложения, чтобы сделать изображение статическим.

Я считаю, что вы можете поместить фоновое изображение в div и установить z-index для отображения другого содержимого. Впоследствии вы можете использовать javascript для фиксации положения div, который содержит фоновое изображение.

Я не тот профессионал, но я решил эту проблему usin ‘jquery. Это довольно просто) Вот код:

  jQuery(window).scroll(function(){ var fromtop = jQuery(window).scrollTop(); jQuery(" your element ").css({"background-position-y": fromtop+"px"}); }); 

следующее решение в Css:

 body { background-image: url( ../images/fundobola.jpg ); background-position: top center;background-repeat:no-repeat; background-size: 1900px 1104px; overflow: -moz-scrollbars-vertical; overflow-y: scroll; } 

— не использовать —- (причина: отключить прокрутку)

 position: fixed 

Решено в Ipad и iPhone

  • API, чтобы определить, работает ли на iPhone или iPad
  • IPhone, iPad и эмулятор BlackBerry для Windows
  • CSS отправить кнопку странного рендеринга на iPad / iPhone
  • IPhone / IPad: Как получить ширину экрана программно?
  • Каков максимальный размер песочницы на iPad?
  • Встроенное видео HTML5 на iPhone против iPad / браузера
  • XCode 4 зависает при «Присоединении к (имя приложения)»
  • Полная веб-страница и отключенный метадатчик view viewport для всех мобильных браузеров
  • shouldAutorotateToInterfaceOrientation не работает
  • Чтение и поиск файлов в формате PDF
  • что быстрее? Переходы CSS3 или анимация jQuery?
  • Давайте будем гением компьютера.