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

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

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

ОТВЕТЫ

Ответ 1

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

#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;
}

И поместите <div id="background_wrap"></div> в <body></body>

<body>
<div id="background_wrap"></div>
</body>

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

Развернув ответ Anlai выше, я обнаружил, что решение повторяло мое изображение, поскольку я прокручивал, а не фиксировал его. Если у кого-то еще была эта проблема, мой 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;
}

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

Ответ 5

следующее решение в 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

Ответ 6

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

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