it-swarm.com.ru

Исправлено фоновое изображение с ios7

У меня есть проект, который я использую фиксированное фоновое изображение. Отлично работает на всем, кроме ios7. На ipad фоновое изображение увеличено и размыто. Вот код CSS, который я использую -

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

вот ссылка на страницу в реальном времени - www.wdeanmedical.com

Что мне не хватает?

34
user2560895

Использование background-attachment: fixed с background-size: cover вызывает проблемы в большинстве мобильных браузеров (как вы уже видели). Вы можете попробовать использовать background-attachment: scroll. Это не даст желаемого эффекта, но вы увидите изображения по крайней мере. Вы можете использовать медиа-запрос или два, чтобы ограничить его устройствами, которые являются планшетами или телефонами, используя @media screen and (max-device-width: 1024px){}

OR

Вы можете использовать background-position: scroll и включить некоторый javascript, который будет держать изображение в положении прокрутки (удерживая его в верхней части окна): DEMO

39
brouxhaha

У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.

у меня была проблема на моих мобильных IOS устройствах.

css (рабочий стол)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Затем я перезаписываю его медиа-запросом, удаляя «исправлено» как фоновое вложение.

CSS (мобильный)

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - устанавливает для этого свойства значение по умолчанию. Я думаю, потому что IOS не принимает 'fixed', он возвращается к значению по умолчанию, которое принимает, scroll.

Это работало для меня на каждом устройстве. Надеюсь, это поможет кому-то еще.

9
Ylama

Попробуй это:

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Words that go over text</h1>
</div>

css

.fixed-img {
  position: fixed;
  z-index: -1;
}

JSFiddle пример

Живой пример

5
Cruz Nunez

Знайте, что это старая ветка, но хотел предоставить обновленное решение, основанное на решении @ Cruz-Nunez

Опора на размер области просмотра может привести к сбою. Например, использование панели просмотра размером 767 пикселей не будет работать на iPad, а увеличение размера сводит на нет преимущества этого подхода.

Вместо этого вы можете проверить, имеет ли устройство возможности наведения, а если нет, переопределить его так:

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

Вы также можете проверить, имеет ли устройство указатель курса (например, палец) вместо точного (например, мышь):

@media (pointer: coarse) { ... }
4
Tim
.header {background-position: -99999px -99999px;}
.header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}

Я считаю, что добился желаемого эффекта на своем собственном сайте, используя вышеперечисленное в сочетании с исправлением, позволяющим 100vh работать на устройствах ios.

2
MugenFTW

Объединение идей @brouxhaha и @yllama: используйте медиа-запрос для iOS, который находится в этом SO посте , чтобы установить

background-attachment: scroll;

Таким образом, фиксированное фоновое изображение появляется для мобильных устройств, не поддерживающих iOS, и всех других устройств.

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}
0
Osprey Eagle

Или вы можете просто поместить прозрачный div, который покрывает экран, и использовать overflow: scroll. Просто ради этого вы можете переписать высоту div с помощью javascript для screen.height.

#scrollbox {
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: transparent;
}

document.getElementByID("scrollbox").style.height = screen.height;

0
Creedish