Использование background-attachment: исправлено в сафари на ipad - PullRequest
Новая
       3

Использование background-attachment: исправлено в сафари на ipad

14 голосов
/ 10 июня 2010

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

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

Ответы [ 6 ]

14 голосов
/ 07 октября 2012

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

#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>
3 голосов
/ 12 августа 2011

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

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

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

2 голосов
/ 13 января 2015

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

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

1 голос
/ 05 августа 2011

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

0 голосов
/ 26 января 2017

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

	jQuery(window).scroll(function(){
		var fromtop = jQuery(window).scrollTop();
		jQuery(" your element ").css({"background-position-y": fromtop+"px"});
	});
0 голосов
/ 12 октября 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...