Position background fixed: background-attachment — CSS: Cascading Style Sheets

Исправлено позиционирование фонового изображения, которое не работало — Общее — Forum

nicholasvi (Николас Ви)

#1

Я безуспешно пытаюсь исправить фоновое изображение «Раздел 1»… Не знаю, почему это не работает.

Что странно, так это то, что он работает, как и ожидалось, в режиме ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА, но когда я публикую
здесь http://almasearch.webflow.io/, фиксированное позиционирование больше не активируется.

Очень запутанно…

Заранее большое спасибо за помощь!


Вот мой сайт Только для чтения: https://preview.webflow.com/preview/almasearch?preview=4f9963a2ffd5b82f05b5c6302a40e645

vincent (Венсан Бидо)

18 июля 2018 г. , 9:07

#2

Фоны, кажется, исправлены, когда я посещаю ваш опубликованный URL.

николасви (Николас Ви)

#3

Спасибо за быстрый ответ, Винсент…

Теперь я еще больше запутался!

Это действительно странно. Если вы посетите мою ссылку только для чтения здесь и войдете в режим предварительного просмотра: https://preview.webflow.com/preview/almasearch?preview=f9d0be2b0064487429e299a5fac9719a
, вы обнаружите, что фоновое изображение в разделе 1 действительно исправлено, как и ожидалось.

Однако на опубликованной странице здесь: almasearch.webflow.com это фактически не зафиксировано. Я понятия не имею, что происходит, и я использую последнюю версию Chrome.

Что еще более странно, так это то, что проблема возникает только в Chrome… Как ни странно, в Internet Explorer 11 все работает идеально — НА РАЗ!

Абсолютно странно! Знаете ли вы, почему Chrome не показывает фиксированный фон так, как должен, и как в режиме предварительного просмотра?

Большое спасибо!

Максимозавр (Максим Дюамель)

#4

Привет, @nicholasvi,

С моей стороны, фиксированный фон также отлично работает.

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

Если вы измените свой макет, вы все равно можете использовать дополнительный div для хранения фонового изображения.
(родительский = раздел 1, относительное положение)> (div с фоновым изображением, положение статично, и вы можете установить ширину и высоту на 100%, чтобы соответствовать разделу 1)> остальное содержимое внутри этого div.

Таким образом, дочерние элементы с абсолютными позициями будут искать первого предка без статической позиции (раздел 1), чтобы оценить их координаты, и ваш макет будет таким же.

help1384×1080 364 КБ

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

Надеюсь, это решит проблему. Дайте мне знать, так как не всегда легко воспроизвести такую ​​​​ошибку.

Макс.

Как создать видеофон с фиксированным приложением. Помоги пожалуйста! — Как

tgary719

#1

Привет! Я пытаюсь понять, как я могу сделать фон видео неподвижным, как вы можете сделать с изображениями. Я пробовал тонны CSS и продолжаю терпеть неудачу.

Видео, которое я хочу сделать фиксированным фоновым видео, расположено на главной странице сайта в самом верху. https://milehighexchangors.com/

Чтобы упростить CSS, я присвоил строке, содержащей видео, класс my-row. Я чувствую, что это должен быть простой CSS, такой как у меня ниже, однако он не работает. Пожалуйста помоги!

#my-row.fl-row-bg-video .fl-row-content {

background-attachment: исправлено;

}

Спасибо!

тгари719

#2

Я знаю, что есть некоторые CSS-свисты, что это торт для смеха

janet4now

#3

Я сейчас не вижу там видео, но если вы хотите сделать полный фон видео:

видео {
object-fit: cover;
ширина: 100vw;
высота: 100вх;
положение: фиксированное;
верх: 0;
слева: 0;
}

тгари719

#4

Привет!

Итак, за словами «ПРИСОЕДИНЯЙТЕСЬ К САМОЙ УДИВИТЕЛЬНОЙ ГРУППЕ R/E EXCHANGE В КОЛОРАДО» в самом верху https://milehighexchangors.com/ сразу под заголовком воспроизводится фоновое видео.

Еще раз спасибо за любую помощь. Я думаю, что часть, вызывающая проблемы, может быть связана с исправлением div и видео. Хотя не уверен.

Спасибо за любую помощь!

janet4now

, 18:04

#5

Вы должны использовать position:fixed, чтобы div оставался на месте.

тгари719

#6

Еще раз привет!

Поэтому каждый раз, когда я устанавливаю блок div в фиксированное положение, он подтягивает блоки под ним, как показано на этом снимке экрана. Даже когда я устанавливаю div под его положением в фиксированное положение, он все равно всплывает.

Еще раз спасибо за вашу помощь!

janet4now

6 сентября 2020 г., 21:44

#7

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

тгари719

#8

Хорошо! Ты потрясающийгггг! Совсем забыл добавить поля. Последняя проблема, с которой у меня возникла проблема, — это z-индекс этих двух элементов div. Я хочу, чтобы нижний div (my-roww) закрывал верхний div (my-row) при прокрутке, тогда как в настоящее время верхний div (my-row) закрывает вторичный при прокрутке. Я установил второе погружение на 999, и оно все еще не работает. Я также попытался установить для первого погружения отрицательное значение, но тогда это был просто белый div.

Вот мой Css на данный момент:

#my-row{

 position:fixed;
ширина: 100%;
z-индекс: 1 !важно;
 

}

#my-roww{
z-index: 999 !важно;
}

Еще раз спасибо за помощь!

тгари719

#9

Хорошо, я солгал. Я исправил эту часть, потому что вторичный div также не был зафиксирован. Нееет, проблема у меня в том, что нижний колонтитул не прикреплен. Я уверен, что это потому, что он обычно позиционируется относительно в теме, а остальные фиксированы, как легко это исправить?

тгари719

#10

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

Спасибо!

тгари719

#11

Я снова солгал, лол! Догадаться.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *