Работает ли это в > iOS 5?
.element {
background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}
Я думал, что это так, но пока это не так.
Работает ли это в > iOS 5?
.element {
background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}
Я думал, что это так, но пока это не так.
В соответствии с этой базой поддержки прикрепления фона, нет.
Другое сообщение предполагает, что придумывание обходного пути для мобильных устройств не стоит:
... и таймеры блокировки Android и iPhone или рендер во время прокрутки, поэтому Эффект заключается в том, что divs перемещаются с прокрученной страницей и только после того, в конце концов, divs возвращаются в ожидаемую позицию. Это противоречит позиции фиксированной идеи
Вы можете обойти это, используя отдельный элемент и position: fixed
, который работает!
HTML:
<div id="Background"></div>
<div id="Content"></div>
CSS
#Background {
background: #000 url("img/Background.jpg") no-repeat 50% 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1
}
С фиксированной позицией на мобильных и сенсорных устройствах слишком много проблем.
До тех пор, пока фон не анимируется каким-либо образом (размытие, css переходит на любой JS) И, как только нет полосы прокрутки, она может использоваться и согласована.
Все остальное будет - в зависимости от браузера - приведет к нежелательным результатам, пикселизации изображения, масштабированию изображений в 100 раз на устройствах IOS, "прыгающим" div и т.д.
Лучшая работа над методом, который я нашел до сих пор, скажем, если вы хотите воспроизвести фиксированную страницу прокрутки BG, заключается в использовании метода параллакса, имеющего один div в качестве прокрутки, следующий с прозрачным фоном, повторение полоскания.
Он выглядит достаточно хорошо, я думаю, и никаких плагинов не требуется.