Полноэкранный фон с фиксированным положением над телом и под контентом

Question

Полноэкранный фон с фиксированным положением над телом и под контентом

0

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

Это основной фон:

Это фиксированная позиция div:

И над этими двумя есть содержание. Весь сайт. Между этими двумя есть движущиеся звезды в чистом css без взаимодействия.

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

body {
   font-family: 'LatoRegular', 'Lucida Grande', Helvetica, sans-serif !important;
   line-height: 21px;
   color: #636e7b;
   overflow: hidden; /*removes it after preloader quits*/
   position: relative;
   background: #1d2939 url("../images/backgroundv2.jpg") fixed;
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: center top;
}

#fix {
    background: transparent url("../images/backgroundv2.png") fixed;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transform: translateZ(0);
}

Любая идея будет оценена по достоинству.

(Это пропущенная версия http://i.imgur.com/bn0fG3j.jpg во время прокрутки)

dev 08 май 2014, в 13:13

Источник

0

не могли бы вы создать скрипку, чтобы повторить проблему - трудно понять, что вы пытаетесь объяснить неправильно
Pete 08 май 2014, в 11:24

Теги:

html

css

css3

background

fixed

2 ответа

Ещё вопросы

не могли бы вы создать скрипку, чтобы повторить проблему - трудно понять, что вы пытаетесь объяснить неправильно

Ilia luk · Answer 1 · 2014-05-08T12-57-00.000Z

хорошо, я играл с вашим кодом, и он работает так, как вы предполагали, я бы, вероятно, сделал это каким-то другим способом, код кажется немного грязным, но он делает то, что вы пытаетесь достичь, проверьте эту скрипту: http://jsfiddle.net/domusnetwork/Lkrkp/

и, может быть, скажите, если я вас неправильно понял.

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

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

и если это не поможет попробовать один из методов в следующей статье: http://css-tricks.com/perfect-full-page-background-image/

хорошего дня :)

dev · Answer 2 · 2014-05-08T18-22-00.000Z

Спасибо за ответы. К счастью, я нашел проблему. Это были движущиеся звезды. Они были сделаны по идее автора codepen, используя простой css с массивным количеством коробочных теней в виде точек в 3 divs (размеры). Из-за высокого количества звезд это требует много рисунка на странице во время прокрутки. Когда я удалял один из звездных размеров, прокрутка прекрасна, фон перестает исчезать, и все в порядке.

Похоже, что производительность должна быть выше всех.