Фоновое изображение, фиксированное положение и iOS
Есть несколько (непонятных?) причин, по которым Apple не включила фиксированное положение фоновых изображений в свою мобильную операционную систему iOS. Это происходит, если у вас есть iPad или iPhone, например.
Что происходит?
Ваше изображение будет зафиксировано, что даст вам своего рода эффект параллакса во всех браузерах и устройствах, кроме iOS. Это означает, что ваш сайт не будет выглядеть так же.
Где проблема?
Исправлено или нет, это не большая проблема, верно? Проблема может возникнуть, если вы хотите применить размер обложки к своему изображению, то есть к фону вашего тела или другой большой области. Пояснения :
- тело — это целая страница вашего сайта, она имеет большую высоту
- установка изображения как фиксированного заставит его оставаться на том же месте в вашем окне/экране
- , указывающий размер обложки, заставит ваше изображение занимать всю область, чтобы заполнить все пространство, чтобы не было пустого места.
- все устройства, кроме iOs: изображение зафиксировано, размер обложки будет ограничен размером вашего экрана, и изображение будет правильно его закрывать
- iOs: он не принимает фиксированное положение, тогда ваше изображение будет охватывать всю область, заданную тегом html (ваше тело или что-то еще, что вы выбрали). Изображение будет растянуто на все это место, оно будет полностью увеличено и искажено. Это ужасно
Какое решение?
Будем надеяться, что у CSS есть решение для ограничения этой проблемы: вы можете определить, используете ли вы устройство iOS, и указать пользовательское свойство CSS, чтобы деактивировать фиксированное положение и установить другой метод изменения размера, более точный для этой ситуации. Все остальные браузеры останутся без изменений.
Пример кода CSS:
#wrapper {
background: url('../images/my_image.jpg') center center no-repeat fix;
background-size: обложка;
} Это применит изображение в качестве фона, фиксированное положение с размером обложки.
Вы можете сделать это просто в Template Creator CK, отредактировав параметры стилей и установив свои изображения и другие параметры.
Чтобы устранить проблему на iOS, вы можете добавить этот код
@supports (-webkit-touch-callout: none) {
#wrapper {
background: url('../images/my_image.jpg') center верхняя прокрутка без повторов;
background-size: auto 100vh;
}
} Это обнаружит устройство, удалит фиксированное положение и придаст вашему изображению пользовательское положение и размер, чтобы оно выглядело лучше, особенно на устройствах Apple. Вы можете адаптировать этот код к своим потребностям и вставить его в Template Creator CK, используя функцию «Добавить пользовательский CSS».
Сохранить
Пользовательские настройки файлов cookie
Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство на нашем веб-сайте. Если вы откажетесь от использования файлов cookie, этот веб-сайт может работать не так, как ожидалось.
Принять все
Отклонить все
Подробнее
Аналитика
Инструменты, используемые для анализа данных, чтобы измерить эффективность веб-сайта и понять, как он работает.
Google Analytics
Принять
Отклонить
Как создать фоновое видео с фиксированным приложением. Помоги пожалуйста! — Как
tgary719
#1
Привет! Я пытаюсь понять, как я могу сделать фон видео неподвижным, как вы можете сделать с изображениями. Я пробовал тонны CSS и продолжаю терпеть неудачу.
Видео, которое я хочу сделать фиксированным фоновым видео, расположено на главной странице сайта в самом верху. https://milehighexchangors.com/
Чтобы упростить CSS, я присвоил строке, содержащей видео, класс my-row.
Я чувствую, что это должен быть простой CSS, такой как у меня ниже, однако он не работает. Пожалуйста помоги!
#my-row.fl-row-bg-video .fl-row-content {
background-attachment: исправлено;
}
Спасибо!
тгари719
#2
Я знаю, что есть некоторые CSS-свисты, что это торт для лол
джанет4ноу
#3
Я сейчас не вижу там видео, но если вы хотите сделать полный фон видео:
видео {
object-fit: cover;
ширина: 100vw;
высота: 100вх;
положение: фиксированное;
верх: 0;
слева: 0;
}
тгари719
#4
Привет!
Итак, за словами «ПРИСОЕДИНЯЙТЕСЬ К САМОЙ УДИВИТЕЛЬНОЙ ГРУППЕ R/E EXCHANGE В КОЛОРАДО» в самом верху https://milehighexchangors.com/ сразу под заголовком воспроизводится фоновое видео.
Еще раз спасибо за любую помощь. Я думаю, что часть, вызывающая проблемы, может быть связана с исправлением div и видео. Хотя не уверен.
Спасибо за любую помощь!
janet4now
#5
Вы должны использовать position:fixed, чтобы div оставался на месте.
тгари719
#6
Еще раз привет!
Поэтому каждый раз, когда я устанавливаю блок div в фиксированное положение, он подтягивает блоки под ним, как показано на этом снимке экрана.
Даже когда я устанавливаю div под его положением в фиксированное положение, он все равно всплывает.
Еще раз спасибо за вашу помощь!
janet4now
С фиксированной позицией он не занимает места, поэтому вам придется добавить отступ к продолжающимся элементам, чтобы они правильно складывались с самого начала. Я считаю, что тогда они будут перекрываться при прокрутке. Этого ты хотел?
тгари719
#8
Хорошо! Ты потрясающийгггг! Совсем забыл добавить поля. Последняя проблема, с которой у меня возникла проблема, — это z-индекс этих двух элементов div.
Вот мой Css на данный момент:
#my-row{
position:fixed; ширина: 100%; z-индекс: 1 !важно;
}
#my-roww{
z-index: 999 !важно;
}
Еще раз спасибо за помощь!
#9
Хорошо, я солгал. Я исправил эту часть, потому что вторичный div также не был зафиксирован. Нееет, проблема у меня в том, что нижний колонтитул не прикреплен. Я уверен, что это потому, что он обычно позиционируется относительно в теме, а остальные фиксированы, как легко это исправить?
тгари719
