У меня проблемы с background-image. Мой веб-сайт хорошо выглядел на устройствах Android, но потом я обнаружил, что iPhone и iPad не любят background-size: cover.

Я исправил это, установив background-size: 100%.

На веб-симуляторах iPhone сайт выглядит вполне нормально, но как только тестируется сайт на реальном iPhone (iOS 9.3), фоновые изображения не отображаются.

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

Размер изображений: 1920x1080.

Веб-сайт: http://www.unterwasserfotografie-thomas-uhl.de/

ОБНОВИТЬ:

Я пробовал решение Азиза снизу. Поиграем с background-size: auto 100%, чтобы изображения выглядели лучше на смартфоне, но они не загружаются на мобильные устройства Apple. Однако, если задан background-size: cover, загружаются все фоны, проблема в том, что отображается только небольшая часть изображения (правая верхняя часть изображения ?!), и эта часть довольно нечеткая ( выглядит как в увеличенном виде). Поскольку я ничего не менял, кроме установки background-size: cover на background-size: 100% auto, я не могу поверить, что изображения накладываются друг на друга.

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

Я понимаю, что background-size: 100% auto - не лучший способ для фонов, и я определенно рассмотрим решение 1. Я не понимаю, почему при загрузке сайта на iPhone загружается только один фон. . Разве background-position: center просто складывает все фоны в одну и ту же позицию на экране, чтобы я мог видеть только последний из загруженных? Помните: всего на сайте около 6 фонов, но отображается только один из них, его изображение также используется в заголовке.

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

4
christian 18 Апр 2016 в 09:15

7 ответов

Лучший ответ

Одна из основных проблем заключается в том, что на мобильных устройствах iOS возникают ошибки при отображении background-size:cover; вместе с background-attachment:fixed;.

Поэтому простым решением было бы использовать медиа-запрос для изменения свойства background-attachment на мобильном устройстве (ширина экрана менее 640 пикселей):

CSS:

@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}

Изменив свойство background-attachment на мобильном устройстве, вы разрешите изображениям правильно отображаться на устройствах iOS.

---РЕДАКТИРОВАТЬ--- Согласно этому вопросу: stackoverflow.com/questions/18999660/, похоже, есть проблема с сокращенным порядком фона свойство на iOS.

Может быть, попробуйте преобразовать свою короткую руку вот так:

.bg-1 { 
  background-image: url(../Dateien/sharkGround1920.jpg); 
  background-size: cover; 
  background-attachment:fixed; 
}
9
Community 23 Май 2017 в 11:54

Ваш background-size устанавливает одно значение - ширину. Это переводится в background-size: 100% auto, где высота задается автоматически и сохраняет соотношение сторон. Объединение этого с background-position из center приведет к тому, что фон будет в середине области просмотра с пробелом вокруг него.

Демонстрация:

css fixed centered background 100% size issue

JsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/


Решение 1. Автоматическая ширина вместо автоматической высоты

По умолчанию background-size: 100% означает, что ширина составляет 100%, а высота задается автоматически. Это хорошо для устройств с широким разрешением или альбомной ориентации. Однако, когда устройство находится в портретной ориентации, будет много вертикальных пробелов. Вы можете использовать эту логику, но переключите ее так, чтобы высота была 100%, а ширина была автоматической, применив background-size: auto 100%;

div {
  height:400px;
  border:1px solid red;
  background: url(http://lorempixel.com/970/540) fixed no-repeat center;
  background-size:auto 100%;
}

div:nth-of-type(2) {
  background-image: url(http://lorempixel.com/960/541);
}

p {
  background:#FFF;
  padding:3em;
  margin: 0;
}
<div></div>
<p>Lorem Ipsum</p>
<div></div>

JsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/4/

Вероятно, лучше всего применить это правило в запросе @media для таргетинга на горизонтальные / мобильные устройства.


Решение 2. Растянутый фон

Вы можете решить эту проблему, применив background-size: 100% 100%, чтобы растянуть фон во вьюпорте и удалить пробелы. Однако фон потеряет свое соотношение сторон и могут возникнуть странные растяжения.

div {
  height:400px;
  border:1px solid red;
  background: url(http://lorempixel.com/970/540) fixed no-repeat center;
  background-size:100% 100%;
}

div:nth-of-type(2) {
  background-image: url(http://lorempixel.com/960/541);
}

p {
  background:#FFF;
  padding:3em;
  margin: 0;
}
<div></div>
<p>Lorem Ipsum</p>
<div></div>

JsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/2/

В качестве альтернативы можно удалить вложение background-position или fixed или просто использовать теги img вместо фона.

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

5
Aziz 19 Апр 2016 в 05:19

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

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

Примере:

var _isOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/);

if (_isOS) {
  $('body').addClass('is-os');
} 

Ссылка на обнаружение iOS с помощью пользовательских агентов: Простой способ идентифицировать пользовательский агент iOS в выражении if / then jQuery?

Таким образом, с помощью этого JS-кода вы можете применить следующий CSS:

body.is-os section {
  background-attachment: initial !important;
  background-size: cover !important;
}

Я использовал important , так как использовал только один селектор, чтобы получить приоритет текущего кода.

Это сработало в iPhone 6s Plus.

2
Community 23 Май 2017 в 12:03

Добавьте этот код в фоновое изображение css: background-size: 100% 100%;

1
Romeo 25 Апр 2016 в 09:35

Попробуйте эти простые вещи для обложки с размером фона в кросс-браузере. Им тоже нравится обложка с размером фона, но по-другому :)

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

1
Welyanto 26 Апр 2016 в 01:44

Я думаю, что проблема браузера с использованием javascript для получения информации об устройстве. затем загрузите изображение в соответствии с устройством с другим разрешением.

1
vjking9 26 Апр 2016 в 10:35
@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}
0
Suraj Vaghela 24 Сен 2018 в 06:47